Kendo UI Chart - Custom Series Colors

How To: Provide Custom Series Colors for Kendo UI Data Visualization Charts

In this blog post i will take a look at one of the simplest API configuration we have for Kendo UI Data Visualization. When you use Kendo UI Data Viz to plot a chart have you ever wanted to provide your own custom colors for the series in the chart. If yes, well read on – i will show you how to achieve custom colors on series using Kendo UI Data Viz. Lets get started.

About Kendo UI:

If you are hearing the word “Kendo UI” for the first time – no problem. I will give you a heads up on what is Kendo UI. Here is what our official wordings are on Kendo UI:

Kendo UI for jQuery by Progress delivers everything you need to build a modern web application under tight deadlines. Choose from more than 70 UI components and easily combine them to create beautiful and responsive apps, while speeding development time by up to 50 percent.

Kendo UI is nothing but a HTML5 based JavaScript UI framework which provides Web/Data Viz/Mobile widgets for you to do HTML5 based apps. You can know more about Kendo UI here. We have a 30 day trial available for you to download and evaluate. So what are you waiting for – go ahead and start a trial.

Creating a Chart:

In order to create a Kendo UI Chart you first start with a empty div in the markup.Here is the code snippet:

Next we will go ahead and instantiate a Kendo UI Chart and use the div as the selector. Here is the code snippet for creating a Chart:

Lets take a closer look at the code:

  • We have provided a title to the chart using the “title” setting
  • We then set default things on the series. In this case we have said that the series is a area series with smooth lines. We use the “seriesDefaults” setting.
  • We then provide 3 series to the chart. We use the “series” setting for this and this is an array.
  • We then set the category axis or x axis related configuration. We provide the x axis data points using the “categories” setting available under “categoryAxis” setting.
  • Finally, we customize the tooltip appearance using the “tooltip” setting

Next, lets run the page and view the output. Here is a screenshot of the Chart being rendered as per the code above:

Kendo UI Chart - Default Series Colors

Fig 1. Kendo UI Chart – Default Series Colors

The colors that are applied to the series are the default Kendo UI Theme colors. Kendo UI provides out of the box 15+ themes for you to use. Since we did not specify a theme specifically, Kendo UI DataViz has applied the default theme and hence the default theme colors for the series.

Custom Series Colors:

Now, lets see how  we can provide a custom series colors to the chart. As part of the Chart API, we expose a specific property called “seriesColors” on the Chart object. This property/setting taken an array of your custom colors and uses that as the series colors. So in order to provide your custom colors you just need to provide the color codes to seriesColors property and chart will pick it up. You will need to provide the same amount of colors as that of your series. In my case, i have 3 series and hence i will provide 3 custom color codes. If you have more series and less colors provided, chart will cycle through the provided colors on the series. Here is the code snippet for the seriesColors setting:

If you take a look at the code, i just added “seriesColors” property and provided 3 color codes as an array. And here is how the chart looks like now:

Kendo UI Chart - Custom Series Colors

Fig 2. Kendo UI Chart – Custom Series Colors

Summary:

We saw how easy it is to provide a custom series colors to your Kendo UI Chart. “seriesColors” is a handy chart setting using which you can provide your custom color swatches for your charts.

You can find the source code for chart we created in the blog post here – http://dojo.telerik.com/@kashyapa/epoTA

This was a short post but i hope you found it informative. If you have any questions/feedback/suggestions – do drop a comments below and we will address it for sure.

Till next time  – Happy Coding.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s