Kendo UI DataViz is our Data Visualization package as part of the Kendo UI Framework. Kendo UI DataViz is HTML5 compliant and generates SVG (Scalable Vector Graphics) on HTMl5 supported browsers and falls back to VML (Vector Markup Language) on browsers that don’t support HTML5. VML is supported by pretty much all browser versions. If you are keen to know more about Kendo UI DataViz, head over to our DataViz demos online: http://demos.telerik.com/kendo-ui/area-charts/index
This blog post will walk you through how to create a custom theme for DataViz charts. Out of the box we ship the following 11 themes:
|
Default |
Blue Opal |
Bootstrap |
|
Silver |
Uniform |
Metro |
|
Black |
Metro Black |
High Contrast |
|
Moonlight |
Flat |
I don’t know about you guys but I say those are pretty good themes for me. But we do understand that not all the times you will go with the default themes we ship. You may want to customize it to your organizational or even project color combination. So we will see how we can do the customization in the coming section.
Kendo UI Themebuilder:
The tool which will help you to customize Kendo UI themes is known as “Kendo UI ThemeBuilder”. It lets you modify themes so that they match the look and feel of our DataViz widgets to that of your site or app. It is an online tool and no we don’t charge you to use it. You can look at the ThemeBuilder tool here: http://demos.telerik.com/kendo-ui/themebuilder/
Steps to Customize DataViz Widgets:
- Navigate to ThemeBuilder tool online.
- To start customization, you are required to first select one of the default themes. This is like a foundation to start the customization. So select any default theme first.
- Next start the ThemeBuilder tool by clicking on the button named “Kendo UI ThemeBuilder”. This will launch the ThemeBuilder GUI tool and will appear on the right hand side of the page. Give it a couple seconds to load the GUI.
- Since we want to customize the DataViz widgets, select the button labeled “DataViz” in the ThemeBuilder GUI tool. This will provide us with a UI which will help us to customize different aspects of the DataViz widgets.
- Things that can be customized on the DataViz Widgets are: Title, Legend, Charting Area, Axes, Tooltip, Series Colors and Gauge
- Scroll Down the page to see the DataViz widgets. Then change the appropriate widget property to your custom value. For e.g. I have changed the chart area color to a custom value and as soon as I do it – I get a instant update of how the widget will look like. Here is a snapshot of my changes:
Like this you can set your custom colors for all the customization points available for the widget. - Once you are done with your changes, click on the “Get JSON” button available on top of the GUI tool. This will spit out a JSON structure of the changes you just did.
- The JSON code will look like below:
Notice that by default the custom code is named as “newTheme”. You can change that and provide your own custom name. Remember the name as this is the name you will use to set a theme on a DataViz widget. All we are doing is – we register this new theme with the DataViz ui and later when we set theme property of DataViz widgets to this custom theme name, Kendo UI will be able to apply your color schemes to the widgets. - Copy the JSON code and add that into a new JavaScript file. Give JS file a meaningful name and include it in any page where you need the custom theme.
Using Custom Theme:
In the previous section, we saw how to create a custom theme. In order to use the custom theme, all you need to do is to set the “theme” property on DataViz widgets to the new custom theme name you have provided during registration. Here is a code snippet of setting the theme on a DataViz widget:
$("#area-chart").kendoChart({
theme:"LohithTheme",
transitions: false,
title: {
text: "Internet Users"
},
legend: {
position: "bottom"
},
seriesDefaults: {
type: "area"
},
series: [
{
name: "United States",
data: [67.96, 68.93, 75, 74, 78]
}, {
name: "World",
data: [15.7, 16.7, 20, 23.5, 26.6]
}
],
valueAxis: {
labels: {
format: "{0}%"
}
},
categoryAxis: {
categories: [2005, 2006, 2007, 2008, 2009]
},
tooltip: {
visible: true,
format: "{0}%"
}
});
I have named my theme as “LohithTheme” and use that name while creating a chart.
I have put up a full fledged demo with a custom theme here: http://trykendoui.telerik.com/@kashyapa/icAJ. This is our new shiny playground for Keno UI called “Kenod UI Dojo”. In the code section you can review the JS code and when you click on Run button output will be shown on the right hand side. Here is snapshot of my custom theme in action:
And that’s as easy as it can get to customize a DataViz theme.
Hope this blog post helps you if you have a similar scenario of customizing our DataViz widgets. Do let us know your feedback on this blog post through the comments.
Till next time – Happy Coding.
Helping Ninja Technologists 