Edit this page

Appearance

The appearance of Kendo UI Charts is controlled mostly by JavaScript style options, unlike the other Kendo UI components in the suite, which use only CSS for styling.

Chart Structure

The main building blocks of a Kendo UI Chart are:

  • Title
  • Legend
  • Chart Area
  • Plot Area
  • Axes
  • Series

For detailed information on Chart titles and legends, refer to the article about them.

Figure 1: The structure of a Chart

Chart Structure

Themes

The Kendo UI Chart widgets come with a set of predefined themes. Use the theme option to select a theme, as demonstrated in the example below. The theme name is case insensitive.

Example
$("#chart").kendoChart({
    theme: "blueOpal",
    series: [{
        type: "bar",
        name: "United States",
        data: [67.96, 68.93, 75, 74, 78]
    }],
    categoryAxis: {
        categories: [2005, 2006, 2007, 2008, 2009]
    }
});

Important

As of the Kendo UI R2 2015 (2015.2.624) release, all CSS code related to the rendering of data visualization, i.e. referring to Gauges, Charts, Barcodes, Diagrams, and Maps, has been moved to the web widgets' CSS files. Please remove any legacy references to kendo.dataviz.css and kendo.dataviz.[theme].css.

Sass Themes

As of the Kendo UI R2 2017 SP1 release, the Chart provides styling options through Sass-based themes.

When the theme is set to "inherit", the component reads colors and fonts from the theme variables.

Example
$("#chart").kendoChart({
    theme: "inherit",
    series: [{
        type: "bar",
        name: "United States",
        data: [67.96, 68.93, 75, 74, 78]
    }],
    categoryAxis: {
        categories: [2005, 2006, 2007, 2008, 2009]
    }
});

Transitions

Kendo UI Charts use animated transitions to display new and updated data. These transitions can be disabled through the transitions option, as demonstrated below.

Example
$("#chart").kendoChart({
    series: [{
        type: "bar",
        name: "United States",
        data: [67.96, 68.93, 75, 74, 78]
    }],
    categoryAxis: {
        categories: [2005, 2006, 2007, 2008, 2009]
    },
    transitions: false
});

See Also

Other articles on Kendo UI Charts:

Is this article helpful? Yes / No
Thank you for your feedback!

Give article feedback

Tell us how we can improve the information

close
Dummy