Getting Started

Out of the box, React Charts is very forgiving and requires very little to use. Let's get started by going over the bare minimum configuration required to render a chart!

• An array of Series objects (more on this in a bit), each with a data property that is an array of Datums (be patient, we'll explain soon!)

1 type DailyStars = {
2   date: Date,
3   stars: number,
4 }
5 
6 type Series = {
7   label: string,
8   data: DailyStars[]
9 }
10 
11 const data: Series[] = [
12   {
13     label: 'React Charts',
14     data: [
15       {
16         date: new Date(),
17         stars: 202123,
18       }
19       // ...
20     ]
21   },
22   {
23     label: 'React Query',
24     data: [
25       {
26         date: new Date(),
27         stars: 10234230,
28       }
29       // ...
30     ]
31   }
32 ]

• primaryAxis: AxisOptions<TDatum>
  • Primary Value Accessor
• secondaryAxes: AxisOptions<TDatum>[]
  • Primary Value Accessor

1 function App() {
2   const primaryAxis = React.useMemo(
3     (): AxisOptions<DailyStars> => ({
4       getValue: datum => datum.date,
5     }),
6     []
7   )
8 
9   const secondaryAxes = React.useMemo(
10     (): AxisOptions<DailyStars>[] => [
11       {
12         getValue: datum => datum.stars,
13       },
14     ],
15     []
16   )
17 
18   return (
19     <Chart
20       options={{
21         data,
22         primaryAxis,
23         secondaryAxes,
24       }}
25     />
26   )
27 }

Now that you know how to build a simple chart, let's dive deeper!