Vue ChartsSparklines - Overview

A Sparkline condenses data trends into small, inline charts, for embedding in tables or dashboards.

Minimal Configuration Copy Link

To create a Sparkline, use the createSparkline API.

template: `<ag-sparkline :options="options"/>`,
components: {
    'ag-sparkline': AgSparkline,
},
data() {
    return {
        type: 'bar',
        container: document.getElementById('myChart'),
        data: [],
        xKey: 'date',
        yKey: 'price',
    };
}

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 Copy Link

Series Copy Link

{
    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 Copy Link

{
    axis: {
        type: 'time',
        visible: true,
        stroke: '#66A4',
        strokeWidth: 1,
    },
    min: 125,
    max: 150,
}

In this configuration:

type corresponds to an axis type as documented in Axis Types
visible hides the axis

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.

Data Updates Copy Link

Sparklines support dynamic data updates, making them ideal for real-time data visualization in tables and dashboards.

The Sparkline will efficiently re-render when data changes, maintaining all other configuration and visual state.

Getting started

Core features

Specialised Charts

Series