Range Bar

Range Bar charts are categorical charts which represent a variation of the Bar charts.

Range Bar charts display data as bars where each bar represents a value range that spans between its minimum and maximum levels. Unlike the standard KendoReact Bar charts, which have anchored bars to their X axis, Range Bar charts render floating bars.

Basic Usage

The following example demonstrates the Range Bar chart in action.

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

import {
    Chart,
    ChartTitle,
    ChartTooltip,
    ChartCategoryAxis,
    ChartCategoryAxisItem,
    ChartSeries,
    ChartSeriesItem,
    ChartSeriesLabels,
    ChartSeriesLabelsFrom,
    ChartSeriesLabelsTo
} from '@progress/kendo-react-charts';

import data from './range-data.json';

const tooltipRender = ({ point = {} }) => (<div>
    Avg Min Temp : { point.value && point.value.from } °C
     <br/>
    Avg Max Temp : { point.value && point.value.to } °C"
</div>);

const labelContentFrom = (e) => (`${ e.value.from } °C`);
const labelContentTo = (e) => (`${ e.value.to } °C`);

const ChartContainer = () => (
    <Chart>
        <ChartTitle text="Average Weather Conditions" />
        <ChartSeries>
            <ChartSeriesItem
                type="rangeColumn"
                data={data}
                fromField="min"
                toField="max"
                categoryField="month"
            >
                <ChartSeriesLabels>
                    <ChartSeriesLabelsFrom content={labelContentFrom} />
                    <ChartSeriesLabelsTo content={labelContentTo} />
                </ChartSeriesLabels>
            </ChartSeriesItem>
        </ChartSeries>
        <ChartCategoryAxis>
            <ChartCategoryAxisItem labels={{ rotation: 'auto' }} />
        </ChartCategoryAxis>
        <ChartTooltip render={tooltipRender} />
    </Chart>
);

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