How to create Grouped and Stack (both) using flow chart?

Question

I can draw Grouped or stack flow chart but cant combine them like this:

Can you help me, thank you

Answer 1

To group stacked bars, you need to include the orderBars and stacked plugins (in that order).

You then need to add a stack and bars.order property to each of your series to allow the ordering and stacking, like so:

var series = [{
    data: [[0, 35], [1, 70], [2, 33]],
    stack: 1,
    bars: {
        order: 1
    }
}, {
    data: [[0, 35], [1, 20], [2, 33]],
    stack: 1,
    bars: {
        order: 1
    }
}, {
    data: [[0, 30], [1, 10], [2, 34]],
    stack: 2,
    bars: {
        order: 2
    }
}, {
    data: [[0, 35], [1, 70], [2, 33]],
    stack: 2,
    bars: {
        order: 2
    }
}];

The options above will stack the first two series object together and the second two series objects together, with the first two stacked series ordered before the second two stacked series. An example of stacking bars can be found at this JSFiddle example.

Replacing the xaxis values with custom values can be done by setting the xaxis.ticks property:

var options = {
    series: {
        bars: {
            show: true,
            barWidth: .2
        }
    },
    xaxis: {
        tickSize: 1,
        ticks: [
            [0, "A"],
            [1, "B"],
            [2, "C"]
        ]
    }
};