New to Kendo UI for Angular? Start a free 30-day trial
Customizing ChartWizard
Variables
The following table lists the available variables for customization.
| Name | Type | Default value | Computed value |
|---|---|---|---|
| $kendo-chart-wizard-icon-area-color | String | if($kendo-enable-color-system, k-color(primary), $kendo-color-primary) | var(--kendo-color-primary, #3f51b5) |
Description
The color of the area around the chart type icon. | |||
| $kendo-chart-wizard-icon-area-bg | String | if($kendo-enable-color-system, k-color(primary-subtle), k-try-tint( $kendo-color-primary, 80% )) | var(--kendo-color-primary-subtle, #d1d5ee) |
Description
The background color of the area around the chart type icon. | |||
| $kendo-chart-wizard-icon-area-border-radius | String | k-border-radius(none) | var(--kendo-border-radius-none, 0px) |
Description
The border radius of the area around the chart type icon. | |||
| $kendo-chart-wizard-icon-area-padding | String | k-spacing(4) | var(--kendo-spacing-4, 1rem) |
Description
The padding of the area around the chart type icon. | |||
| $kendo-chart-wizard-icon-area-focus-shadow | List | inset 0 0 0 1px if($kendo-enable-color-system, k-color(primary-emphasis), k-try-tint( $kendo-color-primary, 25% )) | inset 0 0 0 1px var(--kendo-color-primary-emphasis, #97a0d7) |
Description
The box shadow of the focused area around the chart type icon. | |||
| $kendo-chart-wizard-icon-area-selected-shadow | List | inset 0 0 0 1px $kendo-chart-wizard-icon-area-color | inset 0 0 0 1px var(--kendo-color-primary, #3f51b5) |
Description
The box shadow of the selected area around the chart type icon. | |||
| $kendo-chart-wizard-chart-type-selected-color | String | if($kendo-enable-color-system, k-color(primary), $kendo-color-primary) | var(--kendo-color-primary, #3f51b5) |
Description
The color of the selected chart type items in the Property panel. | |||
| $kendo-chart-wizard-preview-pane-padding | String | k-spacing(4) | var(--kendo-spacing-4, 1rem) |
Description
The padding of the preview pane. | |||
| $kendo-chart-wizard-property-pane-padding | Number | 0 | 0 |
Description
The padding of the property pane. | |||
| $kendo-chart-wizard-chart-type-spacing | String | k-spacing(6) | var(--kendo-spacing-6, 1.5rem) |
Description
The gap between the chart type items in the Property panel. | |||
| $kendo-chart-wizard-icon-text-gap | String | k-spacing(3) | var(--kendo-spacing-3, 0.75rem) |
Description
The gap between the icon area and its text. | |||