All Components

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`;
  }
}
In this article