All Components

Structure

Each Kendo UI Chart consists of basic building blocks that can be configured and further customized.

The main parts of the Chart are:

Series

The data series are the main components of the Chart. The rest of the Chart elements play a supportive role for the user when understanding the plotted series.

Series are declared by using the kendo-chart-series-item configuration components and placed in a kendo-chart-series collection.

The following example configures a set of Scatter Line series.

@Component({
    selector: 'my-app',
    template: `
        <kendo-chart>
          <kendo-chart-series>
            <kendo-chart-series-item type="scatterLine" [data]="seriesData.one">
            </kendo-chart-series-item>
            <kendo-chart-series-item type="scatterLine" [data]="seriesData.two">
            </kendo-chart-series-item>
          </kendo-chart-series>
        </kendo-chart>
    `
})
class AppComponent {
    private seriesData: any {
        one: [[10, 10], [15, 20], [20, 25], [32, 40], [43, 50], [55, 60], [60, 70], [70, 80], [90, 100]],
        two: [[10, 40], [17, 50], [18, 70], [35, 90], [47, 95], [60, 100]]
    };
}

For more information on how to configure each kind of series, refer to the article on series types.

For more information on how to bind the series to data, refer to the article on data binding.

Default Series Configuration

It is possible to apply a subset of settings to all series on the Chart by using the kendo-chart-series-defaults component.

It supports the following child components:

The example below demonstrates how to set the default series type and labels.

@Component({
    selector: 'my-app',
    template: `
        <kendo-chart [categoryAxis]="{ categories: categories }">
          <kendo-chart-series-defaults type="bar">
            <kendo-chart-series-defaults-labels format="c">
            </kendo-chart-series-defaults-labels>
          </kendo-chart-series-defaults>

          <kendo-chart-series>
            <kendo-chart-series-item [data]="salesData">
            </kendo-chart-series-item>
            <kendo-chart-series-item [data]="purchaseData">
            </kendo-chart-series-item>
          </kendo-chart-series>
        </kendo-chart>
    `
})
class AppComponent {
    private salesData: number[] = [20, 40, 45, 30, 50];
    private purchaseData: number[] = [12, 30, 30, 45, 10];
    private categories: string[] = ['Mon', 'Tue', 'Wed', 'Thu', 'Fri'];
}

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 example below 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>
    `
})
class AppComponent {
    private seriesData: number[] = [20, 40, 45, 30, 50];
    private 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 example below 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>
    `
})
class AppComponent {
    private 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>
    `
})
class AppComponent {
    private seriesData: number[] = [20, 40, 45, 30, 50];
    private categories: string[] = ['Mon', 'Tue', 'Wed', 'Thu', 'Fri'];
}

Title

The title is configured through the kendo-chart-title configuration component.

No title will be displayed by default.

The following example demonstrates how to configure the title font and alignment.

@Component({
    selector: 'my-app',
    template: `
        <kendo-chart>
          <kendo-chart-title text="A Lovely Title"
                             color="blue"
                             background="#ccff00"
                             font="19pt sans-serif">
          </kendo-chart-title>
        </kendo-chart>
    `
})
class AppComponent {}

Legend

The legend displays the name of the configured data series.

To customize it, use the kendo-chart-legend configuration component.

The following example demonstrates how to configure the legend position and orientation.

@Component({
    selector: 'my-app',
    template: `
        <kendo-chart>
          <kendo-chart-legend position="bottom" orientation="horizontal">
          </kendo-chart-legend>
          <kendo-chart-series>
            <kendo-chart-series-item name="Fibonacci" [data]="seriesData">
            </kendo-chart-series-item>
          </kendo-chart-series>
        </kendo-chart>
    `
})
class AppComponent {
    private seriesData: number[] = [1, 2, 3, 5];
}

Hiding the Legend

If you set the series names, a default legend is displayed.

The example below demonstrates how to hide the legend by setting its visible property.

@Component({
    selector: 'my-app',
    template: `
        <kendo-chart>
          <kendo-chart-legend [visible]="false">
            <!--              ^^^^^^^^^
                 Note the binding is required,
                 otherwise the property will be
                 bound to a 'false' string.
            -->
          </kendo-chart-legend>
          <kendo-chart-series>
            <kendo-chart-series-item name="Fibonacci" [data]="seriesData">
            </kendo-chart-series-item>
          </kendo-chart-series>
        </kendo-chart>
    `
})
class AppComponent {
    private seriesData: number[] = [1, 2, 3, 5];
}

Click Action

Clicking the legend items toggles the visibility of the clicked series.

To disable or customize this behavior, cancel the legendItemClick event.

The example below demonstrates how to build in toggling by binding the series visibility to a controller field.

@Component({
    selector: 'my-app',
    template: `
        <kendo-chart (legendItemClick)="onLegendItemClick($event)">
          <kendo-chart-series>
            <kendo-chart-series-item name="Fibonacci" [data]="seriesData"
                                     [visible]="seriesVisible">
            </kendo-chart-series-item>
          </kendo-chart-series>
        </kendo-chart>
    `
})
class AppComponent {
    private seriesData: number[] = [1, 2, 3, 5];
    private seriesVisible: boolean = true;

    private onLegendItemClick(e): void {
        /* Do not hide the series on legend click */
        e.preventDefault();

        /* Hide the series manually */
        this.seriesVisible = !this.seriesVisible;
    }
}

Custom Position

It is possible to remove the legend from the flow and position it absolutely through setting the position to custom and configure the offsetX and offsetY options.

@Component({
    selector: 'my-app',
    template: `
        <kendo-chart>
          <kendo-chart-legend position="custom" [offsetX]="40" [offsetY]="25">
          </kendo-chart-legend>
          <kendo-chart-series>
            <kendo-chart-series-item name="Fibonacci" [data]="seriesData">
            </kendo-chart-series-item>
          </kendo-chart-series>
        </kendo-chart>
    `
})
class AppComponent {
    private seriesData: number[] = [1, 2, 3, 5];
}

Chart Area

The Chart area is a container for all Chart elements, including the legend and title.

To customize it, use the kendo-chart-chart-area configuration component.

The following example demonstrates how to configure the Chart area background and margin in pixels.

@Component({
    selector: 'my-app',
    template: `
        <kendo-chart>
          <kendo-chart-area background="#eee" [margin]="30">
          </kendo-chart-area>
          <kendo-chart-series>
            <kendo-chart-series-item name="Fibonacci" [data]="seriesData">
            </kendo-chart-series-item>
          </kendo-chart-series>
        </kendo-chart>
    `
})
class AppComponent {
    private seriesData: number[] = [1, 2, 3, 5];
}

Plot Area

The plot area is a container for the data that is enclosed between the axes.

To customize it, use the kendo-chart-plot-area configuration component.

The following example demonstrates how to configure the background of the plot area.

@Component({
    selector: 'my-app',
    template: `
        <kendo-chart>
          <kendo-chart-plot-area background="#888">
          </kendo-chart-plot-area>
          <kendo-chart-series>
            <kendo-chart-series-item [data]="seriesData">
            </kendo-chart-series-item>
          </kendo-chart-series>
        </kendo-chart>
    `
})
class AppComponent {
    private seriesData: number[] = [1, 2, 3, 5];
}

Panes

The panes allow you to create vertical sub-divisions in a single, categorical Chart. Each pane needs to have its own value axis, but multiple panes can share a category axis.

It is possible to configure Chart panes only when using the Categorical Series.

Panes are declared through the kendo-chart-pane configuration components and placed in a kendo-chart-panes collection.

To control the series placement, plot the series on a value axis that is placed in the desired pane.

The following example demonstrates how to apply this approach.

@Component({
    selector: 'my-app',
    template: `
        <kendo-chart>
          <kendo-chart-panes>
              <kendo-chart-pane name="top">
                <!--            ^^^^^^^^^^
                    Unique ID for the pane
                -->
              </kendo-chart-pane>
              <kendo-chart-pane name="bottom" [height]="100">
                <!--                          ^^^^^^^^^^^^^^
                    Note the binding is required,
                    otherwise the property will be
                    bound to a '100' string.
                -->
              </kendo-chart-pane>
          </kendo-chart-panes>

          <kendo-chart-value-axis>
              <kendo-chart-value-axis-item name="top">
                <!--                       ^^^^^^^^^^
                    Unique ID for the axis.
                    No need to set a pane as it will use the first,
                    'top' pane by default
                -->
              </kendo-chart-value-axis-item>
              <kendo-chart-value-axis-item name="bottom"
                                           pane="bottom">
                <!--                       ^^^^^^^^^^^^^
                    Move the axis to the bottom pane
                -->
              </kendo-chart-value-axis-item>
          </kendo-chart-value-axis>
          <kendo-chart-series>
            <kendo-chart-series-item [data]="seriesData[0]">
                <!-- Will use the first, 'top' value axis by default -->
            </kendo-chart-series-item>
            <kendo-chart-series-item type="line" [data]="seriesData[1]" axis="bottom">
                <!-- Plot this series to the 'bottom' axis              ^^^^^^^^^^^^^ -->
            </kendo-chart-series-item>
          </kendo-chart-series>
        </kendo-chart>
    `
})
class AppComponent {
    private seriesData: number[][] = [[1, 2, 3, 5], [0, 1, 0, 1]];
}
In this article