A Sparkline condenses data trends into small, inline charts, for embedding in tables or dashboards.
Minimal Configuration
To create a Sparkline, use the createSparkline
API.
const options = {
type: 'bar',
container: document.getElementById('myChart'),
data: [],
xKey: 'date',
yKey: 'price',
};
AgCharts.createSparkline(options);
In this configuration:
type
is one of:'bar'
for a Bar Series.'line'
for a Line Series.'area'
for an Area Series.
data
defines the chart data.xKey
defines the categories, and is mapped to the Category Axis.yKey
provides the numerical values, corresponding to the Number Axis.
Customisation
Series
{
type: 'bar',
fill: '#5C6BC0',
cornerRadius: 3,
}
Each of the Bar, Line, and Area Sparklines can be customised using the associated series options. Unlike the default chart, there is no array of series. Instead, the series options are put at the top level. See the documentation for Bar Series, Line Series, and Area Series.
Axes
{
xAxis: {
type: 'time',
interval: {
step: time.month,
},
gridLine: {
enabled: true,
},
},
yAxis: {
type: 'number',
min: 125,
max: 150,
},
}
In this configuration:
xAxis
andyAxis
are axis configurations as documented in Axis Types
When using direction: 'horizontal'
on the Bar Series, the x- and y- axes are flipped so xAxis
always corresponds to the categories and yAxis
always corresponds to the values.