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

Customizing Charts

Variables

The following table lists the available variables for customization.

NameTypeDefault valueComputed value
$kendo-series-aColorif($kendo-enable-color-system, k-color( series-a ), #ff6358)#ff6358
Description
The first base series color and its light and dark shades.
$kendo-series-bColorif($kendo-enable-color-system, k-color( series-b ), #ffe162)#ffe162
Description
The second base series color and its light and dark shades.
$kendo-series-cColorif($kendo-enable-color-system, k-color( series-c ), #4cd180)#4cd180
Description
The third base series color and its light and dark shades.
$kendo-series-dColorif($kendo-enable-color-system, k-color( series-d ), #4b5ffa)#4b5ffa
Description
The fourth base series color and its light and dark shades.
$kendo-series-eColorif($kendo-enable-color-system, k-color( series-e ), #ac58ff)#ac58ff
Description
The fifth base series color and its light and dark shades.
$kendo-series-fColorif($kendo-enable-color-system, k-color( series-f ), #ff5892)#ff5892
Description
The sixth base series color and its light and dark shades.
$kendo-series-1Color$kendo-series-a#ff6358
Description
The series colors in order:
base, light, dark, lighter, darker
$kendo-chart-major-linesColorrgba( if($kendo-enable-color-system, k-color( on-app-surface, true ), if( $kendo-is-dark-theme, $kendo-color-white, $kendo-color-black )), .08 )rgba(0, 0, 0, 0.08)
Description
The color of the Chart grid lines (major).
$kendo-chart-minor-linesColorrgba( if($kendo-enable-color-system, k-color( on-app-surface, true ), if( $kendo-is-dark-theme, $kendo-color-white, $kendo-color-black )), .04 )rgba(0, 0, 0, 0.04)
Description
The color of the Chart grid lines (minor).

In this article

Not finding the help you need?