packages / charts

The charts package offers a set of customisable chart components for visualising data in various formats, such as line charts, bar charts, and pie charts.

Explore other packages in the building-blocks monorepo

Getting started

To get started with using the components from this package in your project, follow these steps:

1. Install the core-components package from npm:

   npm install @antonyjones87/core-components

   It's important to note that core-components is a peer dependency of the charts package. This means that you'll need to install core-components separately in your project for the chart components to work correctly.

2. Install the charts package from npm:

   npm install @antonyjones87/charts

3. Import and use the components in your React application, ensuring they are wrapped within the ThemeProvider component from the core-components package:

   import { ThemeProvider } from '@antonyjones87/core-components';
   import { BarChart } from '@antonyjones87/charts';
      
   function App() {
     return (
       <ThemeProvider theme="light">
         <BarChart
           data={[
             { label: 'January', value: 10 },
             { label: 'February', value: 20 },
             { label: 'March', value: 15 },
           ]}
           xKey="label"
           yKey="value"
         />
       </ThemeProvider>
     );
   }