Appearance
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.
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
ormaterial-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:
Limiting the Displayed Range
To limit the range, which is displayed by the Angular Chart:
- Set the
min
andmax
options of the category axis. - Enable panning and zooming, so that the user is able to see the rest of the data.
To limit the range that is displayed by the StockChart, refer to the article on the navigator and its
from
andto
options.