Appearance

The colors of the Angular Chart are derived from the active Kendo UI theme. It is possible to customize them through the theme variables and the 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 color as main color and accepts an optional background color.

The following customizable pattern fills are available:

• Crosshatch
• Diagonal Stripes
• Dots
• Grid
• Vertical Stripes

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:

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.

Suggested Links

• Angular Charts Homepage
• API Reference of the Angular Charts
• Creating Custom Styles with ThemeBuilder