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.
@Component({
selector: 'my-app',
template: `
<kendo-chart [title]="{ text: 'Sun position at equinox' }">
<kendo-chart-series>
<kendo-chart-series-item type="polarLine" style="smooth"
[data]="sunPosData"
xField="azimuth" yField="altitude">
<kendo-chart-series-item-labels position="below"
[content]="labelContent">
</kendo-chart-series-item-labels>
</kendo-chart-series-item>
</kendo-chart-series>
<kendo-chart-x-axis>
<kendo-chart-x-axis-item [startAngle]="-90" [majorUnit]="30">
</kendo-chart-x-axis-item>
</kendo-chart-x-axis>
<kendo-chart-y-axis>
<kendo-chart-y-axis-item [labels]="{ visible: false }">
</kendo-chart-y-axis-item>
</kendo-chart-y-axis>
</kendo-chart>
`
})
export class AppComponent {
public sunPosData = [
{ "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 },
]
public labelContent(e: any): string {
return `${ e.dataItem.time.substring(0, 2) }h`;
}
}