ag-Charts is an exciting new addition to the ag-Grid family, offering both integrated as well as standalone fully functional charting capabilities.
Your First Chart
Let's say you want to visualise how much you spend on coffee each quarter and that you have the following data:
To render it we can use this simple chart factory configuration:
Here we pass in the
data we want to render, the
container element for the chart
(our chart won't be attached to the DOM without it) and the
series to use to plot the data.
type defaults to
'line' so the only series configuration we
need to specify is 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
on the bottom and
number axis on the left of a chart, both of which are exactly what we need in this
case, so we don't need to supply these here.
The chart also features a legend by default which uses the
yKey for the series, which in this case
Customising the Legend
If we don't want the legend to show 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's say you want to visualise 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 factory 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:
Install ag-Charts with NPM
To install ag-Charts and update your package.json file run:
import the module as follows:
Creating charts is the done using the
agCharts.AgChart factory as shown in the example above, i.e.
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.