RangeArea

RangeArea Charts are Categorical charts which represent a variation of the Area Charts.

Unlike the Area Chart, which is filled to the axis, the Range Area chart is filled between its minimum and maximum values.

Basic Usage

The following example demonstrates the RangeArea 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="rangeArea"
                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