Vue ChartsContext API

This sections covers how shared contextual information is passed to the chart elements.

Overview Copy Link

The purpose of the Context Object is to attach additional information to custom callbacks such as Formatters, Stylers and Tooltip Renderers. The Context Object is accessible via the context property in all callback and event handler parameters.

Context Object Copy Link

The Context Object can be set using the context property either at the root of the chart options, or on an individual series or axis. The series[].context and axes[].context values will be used for callbacks related to the target series or axis, but will fallback to the root context property if they are not set.

{
    context: 'my root context',
    series: [
        {
            type: 'bar',
            itemStyler: ({ context }) => {
                console.log(context); // prints 'my root context'
            },
        },
        {
            context: 'my series context',
            type: 'bar',
            itemStyler: ({ context }) => {
                console.log(context); // prints 'my series context'
            },
        },
    ],
    axes: [
        {
            type: 'number',
            position: 'bottom',
            label: {
                formatter: ({ context }) => {
                    console.log(context); // prints 'my root context'
                },
            },
        },
        {
            type: 'number',
            position: 'left',
            context: 'my axis context',
            label: {
                formatter: ({ context }) => {
                    console.log(context); // prints 'my axis context'
                },
            },
        },
    ],
};

In this snippet:

• series[0] and axes[0] do not have their own context defined, so the callbacks use the context defined at the root.

• series[1] and axes[1] have custom context values defined, and these will be used callbacks.

Context Object Example Copy Link

The example below shows how the Context Object can be used.

Change the User Currency in the dropdown to update the Context Object state, which updates the tooltip and the axis labels.

Note that the Context Object is used by the following callbacks:

• The Y-axis Label Formatter, to convert USD values to the preferred User Currency.
• The Tooltip Renderer, to render both the stock prices in USD and the User Currency (if applicable).
• The Context Menu Actions, to log converted stock prices to the console.