Customize Chart Themes
Environment
| Product | Progress® Kendo UI® Chart for jQuery |
| Operating System | Windows 10 64bit |
| Visual Studio Version | Visual Studio 2017 |
| Preferred Language | JavaScript |
Description
How can I set a theme that is different from the default ones the Kendo UI Chart supports?
Solution
The following example demonstrates how to create a custom theme for a Kendo UI Chart.
<div id="chart" />
<script>
var themes = kendo.dataviz.ui.themes;
var MyTheme = kendo.deepExtend(
// Deep copy
{},
// Base theme
themes.silver,
{
chart: {
// Can contain any chart settings
seriesColors: ["#000022", "#000044", "#000066", "#000088", "#0000aa", "#0000cc", "#0000ee"]
}
}
);
themes.MyTheme = MyTheme;
$("#chart").kendoChart({
theme: "MyTheme",
series: [{
data: [1]
}, {
data: [1]
}, {
data: [1]
}, {
data: [1]
}, {
data: [1]
}, {
data: [1]
}, {
data: [1]
}]
});
</script>