Vue 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.

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

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

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

In this configuration:

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

API Reference