Vue ChartsChart State

The dynamic chart state can be saved and restored using the API.

Save & Restore

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

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

In the above example:

• Create and edit some annotations, 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.

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

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

Date objects can not be serialized, so should instead be provided as an AgStateSerializableDate object in the format { __type: 'date', value: string | number } with a value of any date string or a timestamp number.

Dates returned from chart.getState() will be in the ISO-8601 format and UTC timezone.

initialState: {
    annotations: [
        {
            type: 'line',
            start: {
                x: { __type: 'date', value: '2024-03-21' },
                y: 1234,
            },
            end: {
                x: { __type: 'date', value: '2024-06-21' },
                y: 2345,
            }
        },
    ],
}

State Contents

• annotations - This object includes the position and style of any displayed drawings or text annotations.
• chartType - This string is one of the Chart Types.
• zoom - This object includes start and end ranges of the zoom.

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.

API Reference