Panes

The Chart panes enable you to create vertical sub-divisions in a single categorical Chart.

You have to set an individual value axis to each pane. Multiple panes can share a category axis.

Only the Categorical Chart series support the configuration of panes.

Panes are declared through the ChartPane configuration components and placed in a ChartPanes collection. To control the series placement, plot the series on a value axis which is placed in the desired pane.

import {
    Chart,
    ChartPanes,
    ChartPane,
    ChartValueAxis,
    ChartValueAxisItem,
    ChartSeries,
    ChartSeriesItem
} from '@progress/kendo-react-charts';

const seriesData = [[1, 2, 3, 5], [0, 1, 0, 1]];

const ChartContainer = () => (
    <Chart>
        <ChartPanes>
            <ChartPane name="top" />
            <ChartPane name="bottom" height={100} />
        </ChartPanes>
        <ChartValueAxis>
            <ChartValueAxisItem name="top" />
            <ChartValueAxisItem name="bottom" pane="bottom" />
        </ChartValueAxis>
        <ChartSeries>
            <ChartSeriesItem data={seriesData[0]} />
            <ChartSeriesItem type="line" data={seriesData[1]} axis="bottom" />
        </ChartSeries>
    </Chart>
);

ReactDOM.render(
    <ChartContainer />,
    document.querySelector('my-app')
);

In this article

 /