New to Kendo UI for Angular? Start a free 30-day trial
Customizing Charts
Variables
The following table lists the available variables for customization.
| Name | Type | Default value | Computed value |
|---|---|---|---|
| $kendo-series-a | String | if($kendo-enable-color-system, k-color( series-a ), #ff6358) | var(--kendo-color-series-a, #ff6358) |
Description
The first base series color and its light and dark shades. | |||
| $kendo-series-b | String | if($kendo-enable-color-system, k-color( series-b ), #ffe162) | var(--kendo-color-series-b, #ffe162) |
Description
The second base series color and its light and dark shades. | |||
| $kendo-series-c | String | if($kendo-enable-color-system, k-color( series-c ), #4cd180) | var(--kendo-color-series-c, #4cd180) |
Description
The third base series color and its light and dark shades. | |||
| $kendo-series-d | String | if($kendo-enable-color-system, k-color( series-d ), #4b5ffa) | var(--kendo-color-series-d, #4b5ffa) |
Description
The fourth base series color and its light and dark shades. | |||
| $kendo-series-e | String | if($kendo-enable-color-system, k-color( series-e ), #ac58ff) | var(--kendo-color-series-e, #ac58ff) |
Description
The fifth base series color and its light and dark shades. | |||
| $kendo-series-f | String | if($kendo-enable-color-system, k-color( series-f ), #ff5892) | var(--kendo-color-series-f, #ff5892) |
Description
The sixth base series color and its light and dark shades. | |||
| $kendo-series-1 | String | $kendo-series-a | var(--kendo-color-series-a, #ff6358) |
Description
The series colors in order: base, light, dark, lighter, darker | |||
| $kendo-chart-major-lines | String | if($kendo-enable-color-system, color-mix(in srgb, k-color( on-app-surface ) 8%, transparent), rgba( if( $kendo-is-dark-theme, $kendo-color-white, $kendo-color-black ), .08 )) | color-mix(in srgb, var(--kendo-color-on-app-surface, #3d3d3d) 8%, transparent) |
Description
The color of the Chart grid lines (major). | |||
| $kendo-chart-minor-lines | String | if($kendo-enable-color-system, color-mix(in srgb, k-color( on-app-surface ) 4%, transparent), rgba( if( $kendo-is-dark-theme, $kendo-color-white, $kendo-color-black ), .04 )) | color-mix(in srgb, var(--kendo-color-on-app-surface, #3d3d3d) 4%, transparent) |
Description
The color of the Chart grid lines (minor). | |||