New to Kendo UI for Angular? Start a free 30-day trial


The colors of the Angular Chart are derived from the active Kendo UI theme. It is possible to customize them through the theme variables and the configuration.

Setting the Dimensions

By default, the Angular Chart is 400px high and as wide as its container. To set the dimensions of the Chart, use inline styles or CSS.

View Source
Change Theme:
{% embed_file shared/main.ts hidden %}

Using Series Color from Themes v4

The 5.0 release of the Kendo Themes features an updated color palette for the chart series.

To revert to the series colors from version 4.x, you can:

  • Use the default-dataviz-v4, bootstrap-dataviz-v4 or material-dataviz-v4 swatches.

    import '@progress/kendo-theme-default/dist/default-dataviz-v4.css';
    // or
    import '@progress/kendo-theme-bootstrap/dist/bootstrap-dataviz-v4.css';
    // or
    import '@progress/kendo-theme-material/dist/material-dataviz-v4.css';
  • Use SCSS variables to revert the series colors to their previous defaults:

    • kendo-theme-default:
    // Default v4
    $series-a: #ff6358;
    $series-b: #ffd246;
    $series-c: #78d237;
    $series-d: #28b4c8;
    $series-e: #2d73f5;
    $series-f: #aa46be;
    @import "all.scss";
    • kendo-theme-bootstrap:
    // Bootstrap v4
    $series-a: #0275d8;
    $series-b: #5bc0de;
    $series-c: #5cb85c;
    $series-d: #f0ad4e;
    $series-e: #e67d4a;
    $series-f: #d9534f;
    @import "all.scss";
    • kendo-theme-material:
    // Material v4
    $series-a: #3f51b5;
    $series-b: #2196f3;
    $series-c: #43a047;
    $series-d: #ffc107;
    $series-e: #ff5722;
    $series-f: #e91e63;
    @import "all.scss";
  • Use the seriesColors configuration setting for individual Chart instances:

View Source
Change Theme:

Reloading Theme Colors

The Chart will automatically read the relevant Kendo UI Theme variables upon initialization.

To reload the Chart theme, for example, after replacing the theme stylesheet, use the reloadTheme method:

View Source
Change Theme: