All Components

Axes

The Chart axes provide a value scale for the plotted data series.

Depending on the series types in use, the Chart features:

  • A set of Category and Value axes (Categorical and Radar series).
  • A set of X and Y axes (Scatter and Polar series).
  • No axes (Pie and Funnel series).

Categorical Chart Axes

Category axes are declared through the kendo-chart-category-axis-item configuration components and placed in a kendo-chart-category-axis collection.

Value axes are declared through the kendo-chart-value-axis-item configuration components and placed in a kendo-chart-value-axis collection.

The following example demonstrates a Chart with configured value and category axis.

@Component({
    selector: 'my-app',
    template: `
        <kendo-chart>
          <kendo-chart-value-axis>
              <kendo-chart-value-axis-item [title]="{ text: 'Miles' }"
                                           [min]="0" [max]="100">
                <!--                       ^^^^^     ^^^^^
                     Note the binding is required,
                     otherwise the property will be
                     bound to a string.
                -->
              </kendo-chart-value-axis-item>
          </kendo-chart-value-axis>

          <kendo-chart-category-axis>
              <kendo-chart-category-axis-item [categories]="categories">
              </kendo-chart-category-axis-item>
          </kendo-chart-category-axis>

          <kendo-chart-series>
            <kendo-chart-series-item [data]="seriesData" type="line">
            </kendo-chart-series-item>
          </kendo-chart-series>
        </kendo-chart>
    `
})
export class AppComponent {
    public seriesData: number[] = [20, 40, 45, 30, 50];
    public categories: string[] = ['Mon', 'Tue', 'Wed', 'Thu', 'Fri'];
}

Scatter Chart Axes

X axes are declared through the kendo-chart-x-axis-item configuration components and placed in a
kendo-chart-x-axis collection.

Y axes are declared through the kendo-chart-y-axis-item configuration components and placed in a
kendo-chart-y-axis collection.

The following example demonstrates a Chart with configured X and Y axes.

@Component({
    selector: 'my-app',
    template: `
        <kendo-chart>
          <kendo-chart-x-axis>
              <kendo-chart-x-axis-item [title]="{ text: 'Rainfall' }">
              </kendo-chart-x-axis-item>
          </kendo-chart-x-axis>

          <kendo-chart-y-axis>
              <kendo-chart-y-axis-item [title]="{ text: 'Windspeed' }">
              </kendo-chart-y-axis-item>
          </kendo-chart-y-axis>

          <kendo-chart-series>
            <kendo-chart-series-item [data]="seriesData" type="scatter">
            </kendo-chart-series-item>
          </kendo-chart-series>
        </kendo-chart>
    `
})
export class AppComponent {
    public seriesData: number[][] = [
        [16.4, 5.4], [21.7, 2], [25.4, 3], [19, 2], [10.9, 1],
        [13.6, 3.2], [10.9, 7.4], [10.9, 0], [10.9, 8.2], [16.4, 0]
    ];
}

Default Axis Configuration

It is possible to apply settings to all axes on the Chart, regardless of their kind, by using the kendo-chart-axis-defaults component.

It supports the following child components:

The following example demonstrates how to set the default axis color and label font.

@Component({
    selector: 'my-app',
    template: `
        <kendo-chart>
          <kendo-chart-axis-defaults [line]="{ color: 'red' }">
            <kendo-chart-axis-defaults-labels font="12pt sans-serif">
            </kendo-chart-axis-defaults-labels>
          </kendo-chart-axis-defaults>

          <kendo-chart-category-axis>
              <kendo-chart-category-axis-item [categories]="categories">
              </kendo-chart-category-axis-item>
          </kendo-chart-category-axis>

          <kendo-chart-series>
            <kendo-chart-series-item [data]="seriesData" type="line">
            </kendo-chart-series-item>
          </kendo-chart-series>
        </kendo-chart>
    `
})
export class AppComponent {
    public seriesData: number[] = [20, 40, 45, 30, 50];
    public categories: string[] = ['Mon', 'Tue', 'Wed', 'Thu', 'Fri'];
}
In this article