CODEWITHSUNDEEP
chartsgoogle-visualization
P.Dynan
P.Dynan

Reputation: 57

Google charts: Adding a line to two axis stacked bar chart

I've tried playing with combo, or just adding a line series, but it ends up pushing the bars onto the same axis. I'm trying to get the code below to add a line like in the image. The code is only for context on having the bars working.

enter image description here

google.load('visualization', '1.1', {
    'packages': ['bar', 'corechart']
});
google.setOnLoadCallback(drawStuff);

function drawStuff() {
    var data = new google.visualization.DataTable();
    data.addColumn('string', 'Stuff');
    data.addColumn('number', 'Things');
    data.addColumn('number', 'Clutter');
    data.addColumn('number', 'Important');
    data.addColumn('number', 'Meh');
    data.addRows([
        ['2001', 321, 621, 816, 319],
        ['2002', 163, 231, 539, 594],
        ['2003', 125, 819, 123, 578],
        ['2004', 197, 536, 613, 298]
    ]);

    // Set chart options
    var options = {
        isStacked: true,
        series: {
            2: {
                targetAxisIndex: 1
            },
            3: {
                targetAxisIndex: 1
            },
        }
    };

    // Instantiate and draw our chart, passing in some options.
    var chart = new google.charts.Bar(document.getElementById('chart_div'));
    chart.draw(data, google.charts.Bar.convertOptions(options));
};

Upvotes: 2

Views: 8900

Answers (1)

Heather Sutherland
Heather Sutherland

Reputation: 1

I just had to do this in Google Sheets. First make a chart for the 2 series that you want to have in the stacked columns (2 or 3 or 5 - however many you need). Insert your chart and adjust your chart under Setup-Chart Type select stacked column.

Still under setup go down to add series. and select the additional series you want (budget, target, etc). This will cause your stacked bar graph to add one more "stack" on top. Scroll back up and change your chart type to Combo chart. Mine populated with the additional series automatically but if yours does not go to Customize - Series - Select the series you want to be represented by the line. Under Format-Type select "Line" and this will force the series to move but still keep your stacked columns!

Upvotes: 0

Related Questions