Selection

The Chart category axis enables users to select a specific range by clicking, dragging, resizing, or mouse-wheeling.

To enable the selection, set the select option of the category axis.

Selection is supported only for horizontal category axes.

The following example demonstrates how to enable the selection.

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

class ChartContainer extends React.Component {
    categories = ['A', 'B', 'C', 'D'];
    series = [ 1, 2, 3, 4 ];
    selection = { from: 1, to: 2 };

    render() {
        return (
            <Chart onSelectEnd={this.onSelectEnd}>
                <ChartCategoryAxis>
                    <ChartCategoryAxisItem categories={this.categories} select={this.selection} />
                </ChartCategoryAxis>
                <ChartSeries>
                    <ChartSeriesItem data={this.series} />
                </ChartSeries>
            </Chart>
        );
    }

    onSelectEnd = (args) => {
        const selectedCategories = this.categories.slice(args.from, args.to);
        console.log(`Selected categories: ${ selectedCategories }`);
    }
}

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

Using Selection as Navigator

The following example demonstrates how to use the onSelectEnd event to filter the main pane data.

import React from 'react';
import ReactDOM from 'react-dom';

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

import 'hammerjs';

class ChartContainer extends React.Component {
    data = [];
    categories = [];
    navigatorStep;
    step;

    constructor(props) {
        super(props);

        const startYear = 2000;
        for (let i = 0; i < 200; i++) {
            this.categories.push(startYear + i);
            this.data.push(Math.floor(Math.random() * 200));
        }

        this.state = {
            min: 0,
            max: 20,
            step: 0
        };

        // set the navigator ticks and labels step to prevent the axis from becoming too cluttered
        this.navigatorStep = Math.floor(this.categories.length / 10);
    }

    render() {
        const { min, max, step } = this.state;
        const displayStep = { step };
        const navigatorStep = {
            step: this.navigatorStep
        };

        return (
            <Chart onSelectEnd={this.onSelectEnd}>
                <ChartCategoryAxis>
                    <ChartCategoryAxisItem
                        categories={this.categories}
                        min={min}
                        max={max}
                        labels={displayStep}
                        majorGridLines={displayStep}
                        majorTicks={displayStep}
                    />
                    <ChartCategoryAxisItem
                        categories={this.categories}
                        name="navigatorAxis"
                        labels={navigatorStep}
                        majorGridLines={navigatorStep}
                        majorTicks={navigatorStep}
                        pane="navigator"
                        select={{ from: min, to: max }}
                    />
                </ChartCategoryAxis>
                <ChartPanes>
                    <ChartPane />
                    <ChartPane name={navigator} height={100} />
                </ChartPanes>
                <ChartValueAxis>
                    <ChartValueAxisItem />
                    <ChartValueAxisItem name="valueNavigatorAxis" pane="navigator" />
                </ChartValueAxis>
                <ChartSeries>
                    <ChartSeriesItem type="line" style="smooth" data={this.data} markers={{ visible: false }} />
                    <ChartSeriesItem type="area" style="smooth" data={this.data} axis="valueNavigatorAxis" categoryAxis="navigatorAxis" />
                </ChartSeries>
            </Chart>
        );
    }

    onSelectEnd = (args) => {
        // set the axis range displayed in the main pane to the selected range
        // this.min = args.from;
        // this.max = args.to;

        // set the main axis ticks and labels step to prevent the axis from becoming too cluttered
        // this.step = Math.floor((this.max - this.min) / 10);
    }
}

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