Combine 2 series in one Chart (not stacked)

Question

I am trying to combine 2 separate series in one chart and I am using Highcharts. The requirement is as shown in the attached picture I tried the option as shown in http://jsfiddle.net/gh/get/jquery/1.7.2/highslide-software/highcharts.com/tree/master/samples/highcharts/plotoptions/column-grouping-false/

$(function () {

// First, let's make the colors transparent
Highcharts.getOptions().colors = Highcharts.map(Highcharts.getOptions().colors, function (color) {
    return Highcharts.Color(color)
        .setOpacity(0.5)
        .get('rgba');
});

$('#container').highcharts({
    chart: {
        type: 'column'
    },
    title: {
        text: 'Monthly Average Rainfall'
    },
    subtitle: {
        text: 'Source: WorldClimate.com'
    },
    xAxis: {
        categories: [
            'Jan',
            'Feb',
            'Mar',
            'Apr',
            'May',
            'Jun',
            'Jul',
            'Aug',
            'Sep',
            'Oct',
            'Nov',
            'Dec'
        ]
    },
    yAxis: {
        min: 0,
        title: {
            text: 'Rainfall (mm)'
        }
    },
    legend: {
        layout: 'vertical',
        backgroundColor: '#FFFFFF',
        align: 'left',
        verticalAlign: 'top',
        x: 100,
        y: 70,
        floating: true,
        shadow: true
    },
    tooltip: {
        shared: true,
        valueSuffix: ' mm'
    },
    plotOptions: {
        column: {
            grouping: false,
            shadow: false
        }
    },
    series: [{
        name: 'Tokyo',
        data: [49.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4],
        pointPadding: 0

    }, {
        name: 'New York',
        data: [83.6, 78.8, 98.5, 93.4, 106.0, 84.5, 105.0, 104.3, 91.2, 83.5, 106.6, 92.3],
        pointPadding: 0.1

    }, {
        name: 'London',
        data: [48.9, 38.8, 39.3, 41.4, 47.0, 48.3, 59.0, 59.6, 52.4, 65.2, 59.3, 51.2],
        pointPadding: 0.2

    }, {
        name: 'Berlin',
        data: [42.4, 33.2, 34.5, 39.7, 52.6, 75.5, 57.4, 60.4, 47.6, 39.1, 46.8, 51.1],
        pointPadding: 0.3

    }]
});
});

I have tried other options as well but could not reach the solution.My question is : Can we at all get this functionality in highchart ?

Thanks. enter image description here

maybe you could set grouping "true" and then move the columns with pointPlacement, so that two are overlapping, something like this: jsfiddle — Jacob A.
Since others are working on the answer, I'll throw out the obligatory comment that this is a really bad way to display data. Everything about the set up works to obfuscate the information rather than making sense of it. It's hard to say what the best solution is without knowing the full purpose of your display, but it almost assuredly involves two separate charts instead of cramming everything into one. FWIW — jlbriggs
@jlbriggs you are correct. I tried every bit to oppose it but product guys are happy to see a more complicated view instead of a simple view :) — Anirban

charlie charlie · Accepted Answer · 2015-02-10T09:26:43

As igoel said, playing with grouping and pointPlacement should be enough.

Unfortunately legend does not support series grouping, so you'll have to format it a little with labelFormatter for example.

legend: {
    layout: 'horizontal',
    backgroundColor: '#FFFFFF',
    floating: true,
    align: 'left',
    verticalAlign: 'top',
    x: 90,
    y: 45,
    title: { text: 'Total Pieces' },
    labelFormatter: function () {                
        return this._i < 3 ? this.name + '  per hour (thousands)' : this.name + ' per month (millions)';
    }

Something like this jsfiddle: http://jsfiddle.net/e8aydv3h/1/

Combine 2 series in one Chart (not stacked)

1 Answers