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 ), k-get-theme-color-var( primary-100 )) | var(--kendo-color-primary, #0078d4) |
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-get-theme-color-var( primary-20 )) | var(--kendo-color-primary-subtle, #deecf9) |
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-get-theme-color-var( primary-130 )) | inset 0 0 0 1px var(--kendo-color-primary-emphasis, #004578) |
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, #0078d4) |
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 ), k-get-theme-color-var( primary-100 )) | var(--kendo-color-primary, #0078d4) |
Description
The color of the selected chart type items in the Property panel. | |||
| $kendo-chart-wizard-preview-pane-padding | String | k-spacing(3) | var(--kendo-spacing-3, 0.75rem) |
Description
The padding of the preview pane. | |||
| $kendo-chart-wizard-property-pane-padding | String | k-spacing(3) | var(--kendo-spacing-3, 0.75rem) |
Description
The padding of the property pane. | |||
| $kendo-chart-wizard-chart-type-spacing | String | k-spacing(4) | var(--kendo-spacing-4, 1rem) |
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. | |||
