RangeBar

RangeBar Charts are Categorical charts which represent a variation of the Bar Charts.

RangeBar 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, RangeBar Charts render floating bars.

Basic Usage

The following example demonstrates the RangeBar 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')
);
[
    { "month": "January", "min": 5, "max": 11 },
    { "month": "February", "min": 5, "max": 13 },
    { "month": "March", "min": 7, "max": 15 },
    { "month": "April", "min": 10, "max": 19 },
    { "month": "May", "min": 13, "max": 23 },
    { "month": "June", "min": 17, "max": 28 },
    { "month": "July", "min": 20, "max": 30 },
    { "month": "August", "min": 20, "max": 30 },
    { "month": "September", "min": 17, "max": 26 },
    { "month": "October", "min": 13, "max": 22 },
    { "month": "November", "min": 9, "max": 16 },
    { "month": "December", "min": 6, "max": 13 }
]

In this article