JavaScript ChartsSparklines - Overview

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:

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 and yAxis 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.