jQuery Highcharts double donut chart (donut within donut)

Question

I've been working to replicate this chart design using highcharts.

I've been playing with jsfiddle trying to get the desired results, but the problem is that I can't manage to get the white areas where the percentage isn't filled and can't get the gaps between the bars.

Is this even possible using highcharts?

Answer 1

No, it's perfectly possible. It's just bloody difficult. But hey, why not?

The problem with High Charts is that you cannot rotate nor position your charts with a specific angle.

So to allow you to create the effect you mentioned, we must create a seperate chart for every new data item.

Of course, you don't want to hardcode all this so we need generate the code with a for loop, taking into account the starting and ending points of the data entries, the relative size of the donuts (overall size and inner size), spacing between the outer donut, transformation of the actual values to a ratio etc. etc.: I will spare you the details.

After some trial and error, I ended up with the following result:

Now I've prepared a jsFiddle for you, so you can tweak the settings to your liking and get the result you are after. The most important parameters are:

// Specify all properties here:
var MIN = 0;                       // Specify minimum value (beginning of range) 
var MAX = 100;                     // Specify maximum value (ending of range)
var VALUES = [50, 30, 40, 95, 35]; // Specify the values
var VALUES_WHITE = [20, 20, 20, 20, 20]; // Values for the white donut (5 x 100/5)
var COLORS = ['#1FFFF0', '#FFCD05', '#68EB05', '#EB13EB', '#A7EB09']; // Colors
var CATEGORIES = ['Activity', 'Weight', 'Sleep', 'Health', 'Diet'];   // Categories
var BORDERWIDTH_CHART_1 = 20;       // The border width for the white donut chart
var BORDER_COLOR = 'rgba(96, 72, 193, 1)';

Those parameters will then be used in the code to determine all the variables I mentioned above. E.g. I've now created a minimum of 0 and a maximum of 100 for the values. Therefore, the values in var VALUES = [50, 30, 40, 95, 35];, represent percentages in the graph (0-100 scale).

Right now, I constructed the graph for 5 different categories. If you want more (or less), you can simply alter the properties accordingly and it (should) work. I haven't tested that yet. Anyway, you can improve the graph to your liking: add the percentages to the labels, improve the colors etc.

There is only one limitation: the BORDER_COLOR must be the same color as the color of the background of the charts. In the jsFiddle I created, this is the body of the document (see the top right CSS in the jsFiddle).

I hope you like it :)

Take me to the DEMO already!