Duplicate label on x-axis, stacking bar chart (google charts)

Question

I'm trying to create a stacking bar chart with Google Charts. The data is dynamic, so i wont be able to tell the values of the axises until the chart is made. My problem is that the x-axis sometimes fills in unnecessary labels, as shown in the attached screenshot (In this particular scenario i only have 4 sets of data, so the second label named '12' shouldn't really be there).

Any suggestions to how i can fix this, and also align the columns right above their respective labels?

Duplicate label

Here's some of the code, as requested. Been trying different variations in the options, without much success.

  var data = new google.visualization.DataTable();
        data.addColumn('number', 'X');
        data.addColumn('number', 'Alfa');
        data.addColumn('number', 'Bravo');
        data.addColumn('number', 'Charlie');
        data.addColumn('number', 'Delta');
        data.addColumn('number', 'Echo');
        data.addColumn('number', 'Foxtrot');

        data.addRows(myDataSet);

        var options = {
            width: 1000,
            height: 563,
            series: {
                0: { color: '#F7464A' }, //Alfa
                1: { color: '#46BFBD' }, //Bravo
                2: { color: '#FDB45C' }, //Charlie
                3: { color: '#0971B2' }, //Delta
                4: { color: '#ab7967' }, //Echo
                5: { color: '#a3be8c' }  //Foxtrot
            },
            bar: { groupWidth: '75%' },
            isStacked: true,
            title: title,
            hAxis: {
                title: 'Week',
                format: '0'
            },
            vAxis: {
                title: 'Tasks'
            }
        };

        var chart = new google.visualization.ColumnChart(
            document.getElementById('velocityBarChartDiv'));

        chart.draw(data, options);
        $("#velocityBarChartDiv").show();

Thanks for the updated information. I think a piece or two may still be missing, but see my answer attempt — scniro

scniro scniro · Accepted Answer · 2015-04-23T17:48:14

It was kind of a shot in the dark to piece this together without sample data nor fiddle/plunker playground, but I think the key point you'd like to focus on here is to change your DataTable to arrayToDataTable. Also, browsing through the docs, you may be slightly astray with your setup. Here is my example data setup

var data = new google.visualization.arrayToDataTable(
[
    ['X', 'Alfa', 'Bravo', 'Charlie', 'Delta', 'Echo', 'Foxtrot'],
    ['10', 10, 24, 20, 32, 18, 5],
    ['11', 16, 22, 23, 30, 16, 9],
    ['12', 28, 19, 29, 30, 12, 13],
    ['13', 28, 19, 29, 30, 12, 13]
]);

It was kind of tricky, but it appears as if the first array will be your categories, and the first value in each row will relate to the x axis label. If we ignore those first string values and substitute numeric values, I also experience the shifty x axis you are getting with the "doubled" values.

Anyways, I took what was here, crafted a fiddle, and I think the end result is what you are searching for

Duplicate label on x-axis, stacking bar chart (google charts)

1 Answers

JSFiddle Link