Appearance
The Angular Chart derives its colors from the active Kendo UI theme. You can customize the colors, dimensions, series patterns, and entrance animations through theme variables and component configuration.
Setting the Dimensions
By default, the Angular Chart is 400px high and as wide as its container. To set the dimensions of the Chart, use inline styles or CSS.
Customizing the Series Colors
You can customize the series colors of the Chart by using the series item color property or the seriesColors configuration setting.
Using Pattern Fills
In addition to solid colors, the Chart series can also be filled with repeating patterns by using the series item pattern property.
The pattern inherits the series
coloras main color and accepts an optionalbackgroundcolor.
The following customizable pattern fills are available:
The following example demonstrates how to apply a pattern fill to the Chart series.
Customizing with SCSS Theme Variables
To adjust the series colors via SCSS theme variables, refer to the Customization of the Theme article. You can either set individual series colors or use a map of colors.
Using individual series variables:
// Applied to Angular styles.scss file.
@use '@progress/kendo-theme-bootstrap/scss/all.scss' as * with (
$kendo-series-a: #e74c3c, // crimson red
$kendo-series-b: #f39c12, // bright orange
$kendo-series-c: #27ae60, // emerald green
$kendo-series-d: #3498db, // bright blue
$kendo-series-e: #9b59b6, // amethyst purple
$kendo-series-f: #e67e22, // carrot orange
);Using the colors map:
// Applied to Angular styles.scss file.
@use "@progress/kendo-theme-bootstrap/scss/all.scss" as * with (
$kendo-colors: (
series-a: #ff6358, // coral
series-b: #4a90e2, // blue
series-c: #50c878, // emerald green
series-d: #ffa500, // orange
series-e: #9b59b6, // amethyst purple
series-f: #e74c3c, // crimson red
)
);The default SCSS color variables are organized into six series, each with different intensity variations. The following colors are for the Kendo Default theme and will vary between different themes and swatches:
| Variable | Color Map Key | Color Code | Color Preview |
|---|---|---|---|
| Coral Series | |||
$kendo-series-a | series-a | #ff6358 | |
$kendo-series-a-bold | series-a-bold | #bf4a42 | |
$kendo-series-a-bolder | series-a-bolder | #80322c | |
$kendo-series-a-subtle | series-a-subtle | #ffb1ac | |
$kendo-series-a-subtler | series-a-subtler | #ff8a82 | |
| Lemon Yellow Series | |||
$kendo-series-b | series-b | #ffe162 | |
$kendo-series-b-bold | series-b-bold | #bfa94a | |
$kendo-series-b-bolder | series-b-bolder | #807131 | |
$kendo-series-b-subtle | series-b-subtle | #fff0b1 | |
$kendo-series-b-subtler | series-b-subtler | #ffe989 | |
| Spring Green Series | |||
$kendo-series-c | series-c | #4cd180 | |
$kendo-series-c-bold | series-c-bold | #399d60 | |
$kendo-series-c-bolder | series-c-bolder | #266940 | |
$kendo-series-c-subtle | series-c-subtle | #a6e8c0 | |
$kendo-series-c-subtler | series-c-subtler | #79dda0 | |
| Royal Blue Series | |||
$kendo-series-d | series-d | #4b5ffa | |
$kendo-series-d-bold | series-d-bold | #3847bc | |
$kendo-series-d-bolder | series-d-bolder | #26307d | |
$kendo-series-d-subtle | series-d-subtle | #a5affd | |
$kendo-series-d-subtler | series-d-subtler | #7887fb | |
| Lavender Purple Series | |||
$kendo-series-e | series-e | #ac58ff | |
$kendo-series-e-bold | series-e-bold | #8142bf | |
$kendo-series-e-bolder | series-e-bolder | #562c80 | |
$kendo-series-e-subtle | series-e-subtle | #d6acff | |
$kendo-series-e-subtler | series-e-subtler | #c182ff | |
| Flamingo Pink Series | |||
$kendo-series-f | series-f | #ff5892 | |
$kendo-series-f-bold | series-f-bold | #bf426e | |
$kendo-series-f-bolder | series-f-bolder | #802c49 | |
$kendo-series-f-subtle | series-f-subtle | #ffacc9 | |
$kendo-series-f-subtler | series-f-subtler | #ff82ae |
Customizing Animations
The Chart entrance animations are driven by motion tokens defined in the active Kendo UI theme. Override these CSS variables to control the speed and easing of chart animations without changing component code.
The following table lists the CSS variables that the Charts package reads:
| CSS Variable | Type | Accepted Values | Description |
|---|---|---|---|
--kendo-duration-rapid | Duration | ms or s (200ms, 0.2s) | Controls the duration of short, quick-feedback animations. |
--kendo-duration-steady | Duration | ms or s (600ms, 0.6s) | Controls the duration of longer, more deliberate transitions. |
--kendo-easing-linear | Easing | cubic-bezier(n, n, n, n) | Constant-speed motion curve. |
--kendo-easing-standard | Easing | cubic-bezier(n, n, n, n) | Balanced motion curve for most transitions. |
--kendo-easing-stretchy | Easing | cubic-bezier(n, n, n, n) | Expressive motion curve with an overshoot effect. |
Duration values must be greater than
0. Easing values must use thecubic-bezier()function—keyword values such aslinearoreaseare not supported.
The Chart reads motion tokens from the computed styles of an internal .k-chart element appended to document.body. Define these variables on :root, body, or another inherited scope with CSS, or customize them through SCSS as described in the Motion Customization article.
:root {
--kendo-duration-rapid: 800ms;
--kendo-duration-steady: 800ms;
--kendo-easing-linear: cubic-bezier(0.68, -0.55, 0.265, 1.55);
--kendo-easing-standard: cubic-bezier(0.68, -0.55, 0.265, 1.55);
--kendo-easing-stretchy: cubic-bezier(0.68, -0.55, 0.265, 1.55);
}The following demo overrides all five motion tokens to produce a bouncy entrance animation.
To update motion tokens after the Chart has initialized, use Angular's Renderer2 to set the new CSS variable values on document.documentElement and call the reloadTheme() method. This forces the Chart to re-read all theme variables and replay the entrance animation with the updated timing.
private document = inject(DOCUMENT);
private renderer = inject(Renderer2);
replay(): void {
const root = this.document.documentElement;
this.renderer.setStyle(root, '--kendo-duration-steady', '1500ms', RendererStyleFlags2.DashCase);
this.renderer.setStyle(root, '--kendo-easing-stretchy', 'cubic-bezier(0.68, -0.55, 0.265, 1.55)', RendererStyleFlags2.DashCase);
this.chart.reloadTheme();
}The following demo showcases different motion profiles and their effect on Chart animations.
Reloading Theme Colors
The Chart will automatically read the relevant Kendo UI Theme variables upon initialization.
To reload the Chart theme, for example, after replacing the theme stylesheet, use the reloadTheme method.