React Charts | Get Started with ag-Charts and React
ag-Charts is an exciting new addition to the ag-Grid family, offering both integrated as well as standalone fully functional charting capabilities.
In this article we will walk you through the necessary steps to add ag-Charts to an existing React project and produce your first charts.
Add ag-Charts to Your Project
For the purposes of this tutorial, we are going to scaffold a React app with create-react-app.
Don't worry if your project has a different configuration - ag-Charts and the React wrapper are distributed as NPM packages, which should work with any common React project module bundler setup.
Let's follow the create-react-app instructions and run the following commands in your terminal:
If everything goes well,
npm start has started the web server and conveniently opened a browser
pointing to localhost:3000.
As a next step, let's add the ag-Charts NPM packages. Run the following command in
my-app (you may
need a new instance of the terminal):
After a few seconds of waiting, you should be good to go. Let's get to the actual coding! Open
src/App.js in your favourite text editor and change its contents to the following:
Here we'll provide the
options we want to use for our chart, including the
series to use
to plot the data.
type defaults to
'line' so the only series configuration we
need to specify is to tell the series which keys to use to fetch the data to be
plotted along the horizontal (x) and vertical (y) axes.
series property is an array because it is possible to supply multiple series (including mixed
kinds!) into a single chart.
axes configuration is a
category axis on the bottom and
axis on the left of a chart, both of which are exactly what we need, so we don't need to supply these here.
The chart also features a legend by default which shows the
yKey the series is using, in our case
With all this in place we should now see:
Customising the Legend
If we don't want the legend to show the value of the
yKey itself we can give it a name, for example
This name is more descriptive but also longer, so let's position the legend on the bottom of the chart to make more space for the series:
Basic Column Chart
Now let's try something more interesting. Let us say you want to visualize how much is spent on coffee, milk and tea in your company each quarter and in total. Your data might look something like this:
This time, let's choose another series type to plot the data: stacked columns. Here's the chart configuration we can use to do that:
'line' series charts,
'column' series can have multiple
allow for stacking, in our case one block per quarter.
Chart tooltips are enabled by default so you can hover over a block to see its value.
Labels and Titles
We can enhance our chart by providing a label for each block segment. We can set a label's
fontFamily and other properties, but for now we'll just accept the default values:
If we then want to add a title and subtitle to the chart, we can simply add this to our chart config:
Now that you've had a taste of what it's like to use ag-Charts, we encourage you to explore our documentation to learn more.
Continue to the next section to see the API Reference.