Highcharts - Stack a full serie (Bar chart)

Question

So I have 2 series with data about events :

a serie with views
a serie with € values

1 item in each series relate to 1 event

I want a stacked bar chart with 2 column: 'Views', 'Value'

Each event will have it's own color.

Here is what I have so far :

$('#container').highcharts({
    chart: {
        type: 'bar'
    },
    title: {
        text: 'Stacked bar chart'
    },
    xAxis: {
        categories: ['Views', 'Value']
    },
    yAxis: [{
        min: 0,
        title: {
            text: 'Value (€)'
        }
    },{
        min: 0,
        opposite: true,
        title: {
            text: 'Views'
        }
    }],
    legend: {
        reversed: true
    },
    plotOptions: {
        series: {
            stacking: 'normal'
        }
    },
    series: [{
        name: 'Views',
        data: [{
            name: 'Event1',
            y: 500
        },{
            name: 'Event2',
            y: 200
        },{
            name: 'Event3',
            y: 350
        }],
        yAxis: 1
    }, {
        name: 'Value',
        data: [{
            name: 'Event1',
            y: 3000
        },{
            name: 'Event2',
            y: 2000
        },{
            name: 'Event3',
            y: 1500
        }]
    }]
});

I already setup 2 yAxis for value and views.

My problem is :

datas are stacked by events and not by categories. And as you will see, it's not even a good stacking because the first bar is hiding the second one.

Is it possible to do this with Highcharts ?

EDIT

initial JSFIDDLE

Something more close to what I am looking for :

New Fiddle

But I can't find a way to properly setup my second yAxis

Why do you need second yAxis? When you have two series and each belongs to different axis then you can't stack bars. See working demo: jsfiddle.net/fxadv20h/2 — Paweł Fus
But my need makes sense (in a reporting POV), I want an Y axis per category. That makes no sens to stack monetary values with pure count. Do you think there is a workaround ? — Apolo

Paweł Fus Paweł Fus · Accepted Answer · 2015-02-17T11:10:36

If you want to display yAxis per category, then you need to split all data into separate points. You can connect series (in legend) using linkedTo option. That will require setting for each series color separately (to get matching colors), see demo: http://jsfiddle.net/fxadv20h/4/

And code:

    series: [{
        id: 'e3',
        name: 'Event 3',
        data: [{
            name: 'Views',
            y: 500
        }],
        yAxis: 1
    },{
        id: 'e2',
        name: 'Event 2',
        data: [{
            name: 'Views',
            y: 200
        }],
        yAxis: 1
    },{
        id: 'e1',
        name: 'Event 1',
        data: [{
            name: 'Views',
            y: 150
        }],
        yAxis: 1
    }, {
        linkedTo: 'e3',
        name: 'Event 3',
        data: [{
            x: 1,
            name: 'Value',
            y: 1000
        }]
    },{
        linkedTo: 'e2',
        name: 'Event 2',
        data: [{
            x: 1,
            name: 'Value',
            y: 2000
        }]
    },{
        linkedTo: 'e1',
        name: 'Event 1',
        data: [{
            x: 1,
            name: 'Value',
            y: 1500
        }]
    }]

Highcharts - Stack a full serie (Bar chart)

EDIT

1 Answers