Custom Skin for Kendo UI DataViz Components

Kendo UI DataViz is a collection of components targeting data visualization such as charts, gauges and diagrams. These elements are indispensable in any application that deals with data aggregation and data presentation.

When you develop an application, it is seldom that you are satisfied with the default theme (or the other themes) that Kendo UI offers because oftentimes you need to make your application look and behave like the original mockups that the designers put together.

Just like other popular presentation frameworks, Kendo UI offers a Theme Builder that allows you to create your “unique” and custom theme. With a bit of help from the designers, you can, with a few clicks, make Kendo UI Components look very close to the desired appearance.

Whether it’s for Web or Mobile, you can easily make use of the final LESS or CSS file that the Theme Builder produces. In the case of DataViz widgets, it isn’t trivial. If you include the JavaScript file that the Theme Builder gives you, you will not see any change in your application. You would have to manually apply it to the DataViz components. Here’s how to create a custom skin for Kendo UI DataViz:

Once you create the DataViz theme, you export a JavaScript file (not LESS and not CSS) that looks like this:

kendo.dataviz.ui.registerTheme('awesometheme', {
    "chart": {
        "title": {
            "color": "#8e8e8e"
        },
        "legend": {
            "labels": {
                "color": "#232323"
            }
        },
        "chartArea": {
            "background": "rgba(0, 0, 0, 0)"
        },
        "seriesDefaults": {
            "labels": {
                "color": "#000"
            }
        },
        "axisDefaults": {
            "line": {
                "color": "#ffffff"
            },
            "labels": {
                "color": "#232323"
            },
            "minorGridLines": {
                "color": "#ffffff"
            },
            "majorGridLines": {
                "color": "#ffffff"
            },
            "title": {
                "color": "#232323"
            }
        },
        "seriesColors": [
            "#66c39e",
            "#f15b4e",
            "#66c39e",
            "#f15b4e",
            "rgba(0, 0, 0, 0)",
            "rgba(0, 0, 0, 0)"
        ],
        "tooltip": {
            "background": "#fff",
            "color": "#424a55",
            "opacity": 1
        }
    },
    "gauge": {
        "pointer": {
            "color": "#f15b4e"
        },
        "scale": {
            "rangePlaceholderColor": "#dedede",
            "labels": {
                "color": "#2e2e2e"
            },
            "minorTicks": {
                "color": "#2e2e2e"
            },
            "majorTicks": {
                "color": "#2e2e2e"
            },
            "line": {
                "color": "#2e2e2e"
            }
        }
    }
});

You then need to include this JavaScript file after Kendo DataViz and then call the following:

            //Override the theme for dataviz widgets
            var themable = ["Chart", "TreeMap", "Diagram", "StockChart", "Sparkline", "RadialGauge", "LinearGauge"];

            if (kendo.dataviz) {
                for (var i = 0; i < themable.length; i++) {
                    var widget = kendo.dataviz.ui[themable[i]];

                    if (widget) {
                        widget.fn.options.theme = "awesometheme";
                    }
                }
            }

In this snippet, we are looping through all the dataviz components and overriding the theme name with our “awesometheme”. Pretty simply ey!

Now you wonder, what if you extended the built-in widget and created your own plugins?

 

    // Extended Kendo widget
    kendo.ui.plugin(kendo.dataviz.ui.Chart.extend({

        init: function (element, options) {
            
            var mergedOptions = $.extend(true, {}, this.options, options);

            // Base call to widget initialization
            kendo.dataviz.ui.Chart.fn.init.call(this, element, options);
        },

        options: {
            name: 'AwesomeChart'
        }
    }));

 

In this snippet, we have created our own extension of the Chart component and we called it “AwesomeChart”. So how do we override the theme for our “AwesomeChart” programmatically?

            //Override the theme for dataviz widgets
            var themable = ["Chart", "TreeMap", "Diagram", "StockChart", "Sparkline", "RadialGauge", "LinearGauge"];

            if (kendo.dataviz) {
                for (var i = 0; i < themable.length; i++) {
                    var widget = kendo.dataviz.ui[themable[i]];

                    if (widget) {
                        widget.fn.options.theme = "awesometheme";
                    }
                }
            }

            //Override the theme for custom plugins
            if (kendo.ui.AwesomeChart)
                kendo.ui.AwesomeChart.fn.options.theme = "awesometheme";

Yay! we did it with only 2 lines of code. Are you still questioning why we love Kendo UI?

 

0 Comments

Leave a Reply

Your email address will not be published. Required fields are marked *