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, #ff6358) |
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, #ffeceb) |
Description
The background color of the area around the chart type icon. | |||
| $kendo-chart-wizard-icon-area-border-radius | String | k-border-radius(md) | var(--kendo-border-radius-md, 0.25rem) |
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, #ff9d97) |
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, #ff6358) |
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, #ff6358) |
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 | String | k-spacing(4) | var(--kendo-spacing-4, 1rem) |
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. | |||