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

Customizing Charts

The following table lists the available variables for customization.

NameTypeDefault valueComputed value
$kendo-series-aColor

$blue

#0d6efd

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

$purple

#6f42c1

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

$teal

#20c997

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

$green

#198754

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

$yellow

#ffc107

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

$red

#dc3545

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

$kendo-series-a

#0d6efd

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

rgba( 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-linesColor

rgba( 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?