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')
);
 /