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

Customizing Charts

The following table lists the available variables for customization.

NameTypeDefault valueComputed value
$series-aColor

get-base-hue( purple, 500 )

#9c27b0

Description
The first base series color and its light and dark shades.
$series-bColor

get-base-hue( blue, 500 )

#2196f3

Description
The second base series color and its light and dark shades.
$series-cColor

get-base-hue( teal, 500 )

#009688

Description
The third base series color and its light and dark shades.
$series-dColor

get-base-hue( yellow, 500 )

#ffeb3b

Description
The fourth base series color and its light and dark shades.
$series-eColor

get-base-hue( red, 500 )

#f44336

Description
The fifth base series color and its light and dark shades.
$series-fColor

get-base-hue( green, 500 )

#4caf50

Description
The sixth base series color and its light and dark shades.
$series-1Color

$series-a

#9c27b0

Description
The series colors in order:
base, light, dark, lighter, darker
$chart-major-linesColor

rgba( if( $dark-theme, $white, $black ), .08 )

rgba(0, 0, 0, 0.08)

Description
The color of the Chart grid lines (major).
$chart-minor-linesColor

rgba( if( $dark-theme, $white, $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?