Creating a marimekko chart using Highcharts

Question

I have a requirement to create a marmimekko chart using Highcharts (no other library).

A simple version of this type of chart can be found in the question - Highcharts Marimekko chart refresh

However, my requirement is more complex and I need to have a stacked-column like marimekko chart (similar to what fusion provides - http://www.fusioncharts.com/charts/marimekko-charts/).

The area chart approach may not be the best for this. Other options that I looked into include setting the pointWidth of the series (this doesn't help since I want different column widths for different points of the same series).

A partial implementation from Highcharts that I came across - http://highcharts.uservoice.com/forums/55896-general/suggestions/2303560-multi-dimensional-column-charts

Any ideas, suggestions or examples on how I can create such marimekko charts using Highcharts?

What kind of suggestions do you need? It's quite clear, marimekko type is not directly supported. I would read carefuly code posted by author of the Highcharts on the uservoice and then improve that code to get desired result. Edit: http://jsfiddle.net/75oucp3b/5/ — Paweł Fus, Jun 30 '15 at 09:50
Thanks Pawel. That jsfiddle helps. I will refine it further to suit my needs. — Harikrishnan M, Jun 30 '15 at 10:15

score 0 · Answer 1 · answered Nov 16 '17 at 08:59

I have build something similar. See here: http://jsfiddle.net/06jpczo9/4/

Main gist is this:

Highcharts.chart('container', {

    chart: {
        type: 'variwide'
    },

    title: {
        text: 'Verdeling DBCs type per specialist'
    },

    xAxis: {
        type: 'category',
    },

    yAxis: {
        max: 100,
    },

    legend: {
        enabled: true,
        reversed: true
    },
    plotOptions: {
        variwide: {
            stacking: 'normal',}},
    ...

And then just add some series.

Creating a marimekko chart using Highcharts

1 Answers1