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
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.cssandkendo.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
});