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.
Customizing the Series Colors
You can customize the series colors of the Chart by using the series item color
property or the seriesColors
configuration setting.
Customizing with SCSS Theme Variables
To adjust the series colors via SCSS theme variables, refer to the Customization of the Theme article. Below is an example of how to set custom colors:
// Applied to Angular styles.scss file.
$kendo-series-1: violet !default;
$kendo-series-2: orange !default;
$kendo-series-3: green !default;
// ...
@import "@progress/kendo-theme-default/dist/all.scss";
The default SCSS color variables are as follows:
Variable | Color Code | Color Preview |
---|---|---|
$kendo-series-1 | #ff6358 | |
$kendo-series-2 | #ffe162 | |
$kendo-series-3 | #4cd180 | |
$kendo-series-4 | #4b5ffa | |
$kendo-series-5 | #ac58ff | |
$kendo-series-6 | #ff5892 | |
$kendo-series-7 | #ffb1ac | |
$kendo-series-8 | #fff0b1 | |
$kendo-series-9 | #a6e8c0 | |
$kendo-series-10 | #a5affd | |
$kendo-series-11 | #d6acff | |
$kendo-series-12 | #ffacc9 | |
$kendo-series-13 | #bf4a42 | |
$kendo-series-14 | #bfa94a | |
$kendo-series-15 | #399d60 | |
$kendo-series-16 | #3847bc | |
$kendo-series-17 | #8142bf | |
$kendo-series-18 | #bf426e | |
$kendo-series-19 | #ff8a82 | |
$kendo-series-20 | #ffe989 | |
$kendo-series-21 | #79dda0 | |
$kendo-series-22 | #7887fb | |
$kendo-series-23 | #c182ff | |
$kendo-series-24 | #ff82ae | |
$kendo-series-25 | #80322c | |
$kendo-series-26 | #807131 | |
$kendo-series-27 | #266940 | |
$kendo-series-28 | #26307d | |
$kendo-series-29 | #562c80 | |
$kendo-series-30 | #802c49 |
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.