Trend Chart

The Trend Chart is a composite chart that lets you mix bar, line, and area series on the same axes. This makes it ideal for dashboards where you want to overlay a trend line on top of bar data, or combine multiple visualization types in a single view. Each series specifies its type ('bar', 'line', or 'area'), and all share common features like grid, legend, and animated transitions.

NOTE

For the full API, see the Charts API Reference.

GridLinearSplineBasisBump XBump YCardinalCatmull-RomMonotone XMonotone YNaturalStepStep BeforeStep After

const chart = createTrendChart(context, {
    data,
    key: 'id',
    series: [
        {
            type: 'bar',
            id: 'australia',
            label: 'Australia',
            value: 'australia',
        },
        {
            type: 'bar',
            id: 'new-zealand',
            label: 'New Zealand',
            value: 'newZealand',
        },
        {
            type: 'bar',
            id: 'sweden',
            label: 'Sweden',
            value: 'sweden',
        },
        {
            type: 'line',
            id: 'united-states',
            label: 'United States',
            value: 'unitedStates',
        },
    ],
});