New to KendoReact? Start a free 30-day trial

Customizing Charts

The following table lists the available variables for customization.

NameTypeDefault valueComputed value
$series-a#3f51b5#3f51b5
Description
The first base series color and its light and dark shades.
$series-b#2196f3#2196f3
Description
The second base series color and its light and dark shades.
$series-c#43a047#43a047
Description
The third base series color and its light and dark shades.
$series-d#ffc107#ffc107
Description
The fourth base series color and its light and dark shades.
$series-e#ff5722#ff5722
Description
The fifth base series color and its light and dark shades.
$series-f#e91e63#e91e63
Description
The sixth base series color and its light and dark shades.
$series-1$series-a#3f51b5
Description
The series colors in order:
base, light, dark, lighter, darker
$chart-major-linesrgba( if( $dark-theme, $white, $black ), .08 )rgba( if( $dark-theme, $white, $black ), .08 )
Description
The color of the Chart grid lines (major).
$chart-minor-linesrgba( if( $dark-theme, $white, $black ), .04 )rgba( if( $dark-theme, $white, $black ), .04 )
Description
The color of the Chart grid lines (minor).

In this article

Not finding the help you need?