Series

The data series are the main components of the Chart.

The rest of the Chart elements play a supportive role for the user when understanding the plotted series.

The Chart supports the following series types:

Basic Usage

Series are declared by using the ChartSeriesItem configuration components and placed in a ChartSeries collection.

For more information on how to configure each Chart series, refer to the articles on the series types. For more information on how to bind the series to data, refer to the article on data binding.

The following example configures a set of Scatter Line series.

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

const seriesData = {
    one: [[10, 10], [15, 20], [20, 25], [32, 40], [43, 50], [55, 60], [60, 70], [70, 80], [90, 100]],
    two: [[10, 40], [17, 50], [18, 70], [35, 90], [47, 95], [60, 100]]
};

const ChartContainer = () => (
    <Chart>
        <ChartSeries>
            <ChartSeriesItem type="scatterLine" data={seriesData.one} />
            <ChartSeriesItem type="scatterLine" data={seriesData.two} />
        </ChartSeries>
    </Chart>
);

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

Default Series Configuration

You can apply a subset of settings to all Chart series by using the ChartSeriesDefaults component.

The ChartSeriesDefaults component supports the following child components:

The following example demonstrates how to set the default series type and labels.

import {
    Chart,
    ChartSeries,
    ChartSeriesItem,
    ChartCategoryAxis,
    ChartCategoryAxisItem,
    ChartSeriesDefaults
} from '@progress/kendo-react-charts';

const salesData = [20, 40, 45, 30, 50];
const purchaseData = [12, 30, 30, 45, 10];
const categories = ['Mon', 'Tue', 'Wed', 'Thu', 'Fri'];

const ChartContainer = () => (
    <Chart>
        <ChartSeriesDefaults type="bar" labels={{ format: 'c' }} />
        <ChartCategoryAxis>
            <ChartCategoryAxisItem categories={categories} />
        </ChartCategoryAxis>
        <ChartSeries>
            <ChartSeriesItem data={salesData} />
            <ChartSeriesItem data={purchaseData} />
        </ChartSeries>
    </Chart>
);

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