Vue ChartsChart State

The dynamic chart state can be saved, restored and updated at runtime.

Save & Restore

Use the buttons to save and restore both the Legend and Zoom states.

function saveState() {
    const newState = chart.getState();
    // save to database...
}

function restoreState() {
    // retrieve state from database...
    chart.setState(state);
}

In the above example:

• Zoom and pan the chart, and also toggle some legend items. Then click 'Save' to store the chart state using chart.getState().
• Click the 'Restore' button to restore a saved state to the chart using chart.setState().
• This will override the current state.

Financial Charts also allow save, restore and update of annotations and chart type.

In the above example:

• Use the toolbar to create annotations and change the chart type, and then click 'Save' to store the chart state using chart.getState().
• Click the 'Restore' button to restore a saved state to the chart using chart.setState().
• This will override the current state.

Initial State

The initialState chart option allows creating a chart with a saved state already applied.

Additionally, mutating this option at runtime will modify the chart state dynamically.

The objects provided to this property should be the same as the object returned from the getState() method.

initialState: {
 zoom: {
            rangeX: {
                start: {
                    __type: 'date',
                    value: new Date('2021-01-01').getTime(),
                },
            },
        },
    legend: [
        {
            seriesId: 'tate-modern',
            visible: false,
        },
    ],
}

In this example:

• The chart loads with an initialState for both Zoom and Legend.
• Clicking the buttons updates the initialState, changing the Zoom or Legend toggle state.
• Note that the same approach applies to Financial Charts.

State Contents

• zoom - This object contains start and end ranges of the zoom.
• legend - This array contains the current visibility of each series or item in the legend.
• annotations - This object contains the position and style of any displayed drawings or text annotations.
• chartType - This string is one of the Chart Types.

Note that all the state properties are optional, so a property can be excluded if you do not want to restore it.

Zoom

Zoom state can be provided as a range or ratio on each axis direction with either the rangeX & rangeY or ratioX & ratioY properties.

If both a range and ratio are provided, only the rangeX and rangeY values will be used.

The start and end properties of rangeX and rangeY should match the type of axis, e.g. a date for an Ordinal Time Axis.

The start and end properties of ratioX and ratioY should be a value between 0 and 1 as a proportion of the width or height of the chart.

Legend

The initial legend state can be configured with an array of objects defining legend items for the series in the chart. Each object includes a seriesId to match the series and a visible property to control its visibility.

For series with multiple legend items, such as pie or donut, an itemId specifies data elements by their index in the data array.

A legendItemName can be added to the legend initial state and series options, taking priority over both seriesId and itemId.

API Reference