All Components

Radar

Radar Charts, also known as Spider Charts, are Categorical charts which wrap the X axis in a circle or polygon.

Typically, the order of the categories is not significant.

Basic Usage

The following example demonstrates the Radar Chart in action.

@Component({
  selector: 'my-app',
  template: `
    <kendo-chart [title]="{ text: 'Market Value of Major Banks /bln/' }">
      <kendo-chart-series>
        <kendo-chart-series-item type="radarLine"
                                 name="Market value as of 2007"
                                 [data]="banksData" field="pre" categoryField="name">
        </kendo-chart-series-item>
        <kendo-chart-series-item type="radarLine"
                                 name="Market value as of 2009"
                                 [data]="banksData" field="post" categoryField="name">
        </kendo-chart-series-item>
      </kendo-chart-series>
      <kendo-chart-value-axis>
          <kendo-chart-value-axis-item [labels]="{ format: 'C0' }">
          </kendo-chart-value-axis-item>
      </kendo-chart-value-axis>
      <kendo-chart-legend position="bottom"></kendo-chart-legend>
    </kendo-chart>
  `
})
export class AppComponent {
  public banksData = [
    { name: "JP Morgan", pre: 116, post: 64 },
    { name: "HSBC", pre: 165, post: 85 },
    { name: "Credit Suisse", pre: 215, post: 97 },
    { name: "Goldman Sachs", pre: 75, post: 27 },
    { name: "Morgan Stanley", pre: 100, post: 16 },
    { name: "Societe Generale", pre: 49, post: 26 },
    { name: "UBS", pre: 80, post: 35 },
    { name: "BNP Paribas", pre: 116, post: 32 },
    { name: "Unicredit", pre: 108, post: 26 },
    { name: "Credit Agricole", pre: 90, post: 17 },
    { name: "Deutsche Bank", pre: 67, post: 10 },
    { name: "Barclays", pre: 76, post: 7 },
    { name: "Citigroup",  pre: 91, post: 19 },
    { name: "RBS", pre: 255, post: 5 }
  ];

  public labelContent(e: any): string {
      return `${ e.dataItem.time.substring(0, 2) }h`;
  }
}
In this article