Polar

Polar Charts are Scatter charts which display two-dimensional data series in polar coordinates.

Basic Usage

The following example demonstrates the Polar Chart in action.

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

import {
    Chart,
    ChartTitle,
    ChartXAxis,
    ChartXAxisItem,
    ChartYAxis,
    ChartYAxisItem,
    ChartSeries,
    ChartSeriesItem,
    ChartSeriesLabels
} from '@progress/kendo-react-charts';

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

const labelContent = (e) => (`${ e.dataItem.time.substring(0, 2) }h`);

const ChartContainer = () => (
    <Chart>
        <ChartTitle text="Sun position at equinox" />
        <ChartSeries>
            <ChartSeriesItem
                type="polarLine"
                data={data}
                xField="azimuth"
                yField="altitude"
            >
                <ChartSeriesLabels position="below" content={labelContent} />
            </ChartSeriesItem>
        </ChartSeries>
        <ChartXAxis>
            <ChartXAxisItem startAngle={-90} majorUnit={30} />
        </ChartXAxis>
        <ChartYAxis>
            <ChartYAxisItem labels={{ visible: false }} />
        </ChartYAxis>
    </Chart>
);

ReactDOM.render(
    <ChartContainer />,
    document.querySelector('my-app')
);
[
    { "time": "08:00", "altitude": 4.9, "azimuth": 92.7 },
    { "time": "09:00", "altitude": 17.6, "azimuth": 100.6 },
    { "time": "10:00", "altitude": 30.1, "azimuth": 109.7 },
    { "time": "11:00", "altitude": 41.8, "azimuth": 121.3 },
    { "time": "12:00", "altitude": 51.8, "azimuth": 137.7 },
    { "time": "13:00", "altitude": 58.5, "azimuth": 161.5 },
    { "time": "14:00", "altitude": 59.4, "azimuth": 190.7 },
    { "time": "15:00", "altitude": 54.1, "azimuth": 216.6 },
    { "time": "16:00", "altitude": 44.8, "azimuth": 234.8 },
    { "time": "17:00", "altitude": 33.5, "azimuth": 247.6 },
    { "time": "18:00", "altitude": 21.2, "azimuth": 257.2 },
    { "time": "19:00", "altitude": 8.4, "azimuth": 265.3 }
]

In this article