How to Create One Theme for Many Charting Products

It's hard to compare chart products when they are not styled the same way. When Highcharts shows let's say its Dark Unica theme, and CanvasJS its own Dark 1 theme.

Another common use case is when you switch from one product to another. If you already prototyped with let's say the Microsoft ASP.NET chart control, but now you want to take advantage of the animated JavaScript charts and move to JS libraries such as FusionCharts or AnyChart, you'll find each chart product comes with its own specific look&feel and built-in themes. tries to lower this gap. For each featured chart application - and there are a dozen apps already - there is a common theme which is applied as much as possible to every supported chart.

The charts below, for instance, are all centered stacked bar charts, or population pyramid charts, with two separate series one side and the other of the median baseline, using the same style on different products. All charts have a similar look&feel, but each is built with a different chart application: first with the Microsoft ASP.NET chart control, second with the well-known JavaScript library Highcharts, third with the JS library FusionCharts.

Another trio shows similar grouped spline area charts with different chart apps: amCharts, Syncfusion EJS and Shield UI JS chart. amCharts is another JavaScript library, while Syncfusion EJS and Shield UI JS chart are JavaScript versions from companies offering the same chart products for ASP.NET or other .NET implementations.

These grouped spline area charts show one separate filled area for each series. The demo data represents sales in US, France, and UK over two decades.

To get access to this detailed information, you go to template's page on and you toggle some trivial switches from the generic sidebar editor. You can turn on this way the title, axes, legend, tooltips, labels and other precious visual information, with no programming knowledge required. And you don't have to know anything about the internal details of any featured product, to get an unlimited number of chart views on screen.

Bubble charts show with the (x, y) cartesian coordinate of each scatter point a third dimension, as the size of the bubble. When each circle gets a different color, we talk about a single-series multi-color bubble chart.

The following charts look also similar, but they have been created with different products too: first chart with Shield UI, second with CanvasJS, and third with jqPlot. Remark how jqPlot displays some interesting gradient color within each bubble, while the other two apps don't. This is because not all chart products support all possible features.

The Metallika Showcase Template, featured before in this post, is just one set of charts using the original Metallika styled theme. This template displays similar charts with different products, as previously described. Using the Metallika search keyword, you may browse dozens of other chart templates, with single or multiple apps, based on the same styles.

Cristian Scutaru is an experienced software architect and developer. His main focus is on productivity tools, database access, big data and dataviz. He's currently trying to promote his last creation,