Appearance

The colors of the Chart are derived from the active KendoReact theme. For customization of the themes, refer to the customizing themes article.

Setting the Dimensions

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

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.

Copy Codeimport "@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:

  Copy Code// 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:

  Copy Code// 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:

  Copy Code// 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 prop on individual Chart instances:

Limiting the Displayed Range

To limit the range which is displayed by the Chart:

1. Set the min and max options of the category axis.
2. Enable panning and zooming, so that the user is able to see the rest of the data.

Suggested Links

• API Reference of the Chart
• Creating Custom Styles with ThemeBuilder