why are there overlapping google chart columns?

Question

Look at this fiddle below.

The columns are wide and overlapping. In general, column charts draw non-overlapping and narrower columns with many data rows in other cases. Why these columns are overlapping? How to avoid this issue?

google.charts.load('current', { 'packages': ['corechart', 'table'], 'language': 'hu'});
google.charts.setOnLoadCallback(function() {
    drawChart();
});

options = { "isStacked": true, "hAxis": { "title": "Nap" }, "vAxis": { "title": "Darab" }, "chartArea": { "top": 20, "height": "75%" }, "colorAxis": { "legend": { "position": "bottom" } } } ;

headers = [ { "columnName": "day", "columnType": "date" }, { "columnName": "n1", "columnType": "number" }, { "columnName": "n2", "columnType": "number" }, { "columnName": "n3", "columnType": "number" }, { "columnName": "n4", "columnType": "number" }, { "columnName": "n5", "columnType": "number" }, { "columnName": "n6", "columnType": "number" }, { "columnName": "n7", "columnType": "number" }, { "columnName": "n8", "columnType": "number" }, { "columnName": "n9", "columnType": "number" }, { "columnName": "n10", "columnType": "number" }, { "columnName": "n11", "columnType": "number" } ] ;

data = [ [ new Date("2023-04-11T22:00:00.000Z"), 9, 6, 1, null, null, null, null, null, null, null, null ], [ new Date("2023-04-08T22:00:00.000Z"), 2, 3, null, null, null, null, 1, null, null, null, null ], [ new Date("2023-04-26T22:00:00.000Z"), 3, 14, 4, 2, null, 4, null, null, 1, null, 1 ], [ new Date("2023-04-03T22:00:00.000Z"), 8, 11, null, 1, 2, null, 4, null, null, null, null ], [ new Date("2023-04-23T22:00:00.000Z"), 5, 7, null, null, 2, null, null, null, null, null, null ], [ new Date("2023-04-14T22:00:00.000Z"), 4, 5, null, null, null, null, null, null, null, null, null ], [ new Date("2023-04-18T22:00:00.000Z"), 5, 5, 1, 1, 1, null, null, 3, null, null, null ], [ new Date("2023-04-25T22:00:00.000Z"), 5, 12, 2, 5, null, 7, 1, 1, 1, null, null ], [ new Date("2023-04-12T22:00:00.000Z"), 4, 4, null, 1, 4, null, null, null, null, null, null ], [ new Date("2023-04-06T22:00:00.000Z"), 2, 2, null, null, null, null, null, null, null, null, null ], [ new Date("2023-04-17T22:00:00.000Z"), 6, 6, 1, null, 1, null, 1, null, null, null, null ], [ new Date("2023-04-04T22:00:00.000Z"), 3, 8, null, null, null, null, null, null, null, 2, null ], [ new Date("2023-04-22T22:00:00.000Z"), 1, 7, null, null, null, null, null, null, null, null, null ], [ new Date("2023-04-05T22:00:00.000Z"), 11, 5, null, null, null, null, 1, null, null, null, null ], [ new Date("2023-04-16T22:00:00.000Z"), 11, 3, null, 1, null, null, null, 2, null, null, null ], [ new Date("2023-04-20T22:00:00.000Z"), 7, 10, 1, null, null, null, null, null, null, null, null ], [ new Date("2023-04-10T22:00:00.000Z"), 2, 5, null, 1, 2, null, null, null, null, null, null ], [ new Date("2023-04-27T22:00:00.000Z"), 5, 3, 1, null, null, null, null, null, 1, null, null ], [ new Date("2023-04-24T22:00:00.000Z"), 2, 11, null, null, null, null, null, null, null, null, null ], [ new Date("2023-04-13T22:00:00.000Z"), 4, 7, null, null, null, null, null, null, null, null, null ], [ new Date("2023-04-02T22:00:00.000Z"), 1, 5, null, 1, null, null, 2, null, null, null, null ], [ new Date("2023-04-07T22:00:00.000Z"), 2, 7, null, null, null, null, null, null, null, null, null ], [ new Date("2023-04-21T22:00:00.000Z"), null, 5, null, null, null, null, null, null, null, null, null ], [ new Date("2023-04-09T22:00:00.000Z"), 2, 4, null, null, null, null, null, null, null, null, null ], [ new Date("2023-04-19T22:00:00.000Z"), 3, 7, null, null, null, null, null, null, null, null, null ], [ new Date("2023-04-15T22:00:00.000Z"), 1, 5, null, null, null, null, null, null, null, null, null ] ];


function drawChart()
{
    var dataTable = new google.visualization.DataTable();
  var chart = new google.visualization.ColumnChart(document.getElementById("chart"));
  headers.forEach(function (element) { dataTable.addColumn(element.columnType, element.columnName); });
    dataTable.addRows(data);
  chart.draw(dataTable, options);
}

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript" src="https://google.github.io/palette.js/palette.js"></script>
<div id="chart" style="height:450px"></div>

Does this answer your question? [Bar overlapping issue in google chart - Combo chart](https://stackoverflow.com/questions/19022179/bar-overlapping-issue-in-google-chart-combo-chart) — 0stone0, May 04 '23 at 11:31
I don't think so. That question is around targetAxisIndex and isStacked. OP wanted a stacked chart, naming it "overlapping". It seems In my fiddle however that google charts calculates column width to too wide and this way creates an artifacted (halfway-overlapping) look. — Feri, May 04 '23 at 11:44

score 1 · Answer 1 · answered May 04 '23 at 22:19

you can reduce / set the width of the bars with the following config option...

bar: {groupWidth: 12}

where...

The width of a group of bars, specified in either of these formats:
Pixels (e.g. 50).
Percentage of the available width for each group (e.g. '20%'), where '100%' means that groups have no space between them.
Type: number or string
Default: The golden ratio, approximately '61.8%'.

see following working snippet...

google.charts.load('current', { 'packages': ['corechart', 'table'], 'language': 'hu'});
google.charts.setOnLoadCallback(function() {
    drawChart();
});

options = { bar: {groupWidth: 12}, "isStacked": true, "hAxis": { "title": "Nap" }, "vAxis": { "title": "Darab" }, "chartArea": { "top": 20, "height": "75%" }, "colorAxis": { "legend": { "position": "bottom" } } } ;

headers = [ { "columnName": "day", "columnType": "date" }, { "columnName": "n1", "columnType": "number" }, { "columnName": "n2", "columnType": "number" }, { "columnName": "n3", "columnType": "number" }, { "columnName": "n4", "columnType": "number" }, { "columnName": "n5", "columnType": "number" }, { "columnName": "n6", "columnType": "number" }, { "columnName": "n7", "columnType": "number" }, { "columnName": "n8", "columnType": "number" }, { "columnName": "n9", "columnType": "number" }, { "columnName": "n10", "columnType": "number" }, { "columnName": "n11", "columnType": "number" } ] ;

data = [ [ new Date("2023-04-11T22:00:00.000Z"), 9, 6, 1, null, null, null, null, null, null, null, null ], [ new Date("2023-04-08T22:00:00.000Z"), 2, 3, null, null, null, null, 1, null, null, null, null ], [ new Date("2023-04-26T22:00:00.000Z"), 3, 14, 4, 2, null, 4, null, null, 1, null, 1 ], [ new Date("2023-04-03T22:00:00.000Z"), 8, 11, null, 1, 2, null, 4, null, null, null, null ], [ new Date("2023-04-23T22:00:00.000Z"), 5, 7, null, null, 2, null, null, null, null, null, null ], [ new Date("2023-04-14T22:00:00.000Z"), 4, 5, null, null, null, null, null, null, null, null, null ], [ new Date("2023-04-18T22:00:00.000Z"), 5, 5, 1, 1, 1, null, null, 3, null, null, null ], [ new Date("2023-04-25T22:00:00.000Z"), 5, 12, 2, 5, null, 7, 1, 1, 1, null, null ], [ new Date("2023-04-12T22:00:00.000Z"), 4, 4, null, 1, 4, null, null, null, null, null, null ], [ new Date("2023-04-06T22:00:00.000Z"), 2, 2, null, null, null, null, null, null, null, null, null ], [ new Date("2023-04-17T22:00:00.000Z"), 6, 6, 1, null, 1, null, 1, null, null, null, null ], [ new Date("2023-04-04T22:00:00.000Z"), 3, 8, null, null, null, null, null, null, null, 2, null ], [ new Date("2023-04-22T22:00:00.000Z"), 1, 7, null, null, null, null, null, null, null, null, null ], [ new Date("2023-04-05T22:00:00.000Z"), 11, 5, null, null, null, null, 1, null, null, null, null ], [ new Date("2023-04-16T22:00:00.000Z"), 11, 3, null, 1, null, null, null, 2, null, null, null ], [ new Date("2023-04-20T22:00:00.000Z"), 7, 10, 1, null, null, null, null, null, null, null, null ], [ new Date("2023-04-10T22:00:00.000Z"), 2, 5, null, 1, 2, null, null, null, null, null, null ], [ new Date("2023-04-27T22:00:00.000Z"), 5, 3, 1, null, null, null, null, null, 1, null, null ], [ new Date("2023-04-24T22:00:00.000Z"), 2, 11, null, null, null, null, null, null, null, null, null ], [ new Date("2023-04-13T22:00:00.000Z"), 4, 7, null, null, null, null, null, null, null, null, null ], [ new Date("2023-04-02T22:00:00.000Z"), 1, 5, null, 1, null, null, 2, null, null, null, null ], [ new Date("2023-04-07T22:00:00.000Z"), 2, 7, null, null, null, null, null, null, null, null, null ], [ new Date("2023-04-21T22:00:00.000Z"), null, 5, null, null, null, null, null, null, null, null, null ], [ new Date("2023-04-09T22:00:00.000Z"), 2, 4, null, null, null, null, null, null, null, null, null ], [ new Date("2023-04-19T22:00:00.000Z"), 3, 7, null, null, null, null, null, null, null, null, null ], [ new Date("2023-04-15T22:00:00.000Z"), 1, 5, null, null, null, null, null, null, null, null, null ] ];


function drawChart()
{
    var dataTable = new google.visualization.DataTable();
  var chart = new google.visualization.ColumnChart(document.getElementById("chart"));
  headers.forEach(function (element) { dataTable.addColumn(element.columnType, element.columnName); });
    dataTable.addRows(data);
  chart.draw(dataTable, options);
}

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript" src="https://google.github.io/palette.js/palette.js"></script>
<div id="chart" style="height:450px"></div>

hope this helps, as to "why", that would be a question for [Google](https://github.com/google/google-visualization-issues/issues)... — WhiteHat, May 04 '23 at 22:19
Thanks, I consider groupWidth as a workaround only since google charts computes it well automatically in other cases. I'm afraid it's simply a google bug with 'date' type as an independent axis (if you change the data type and content of the first column to string then it works well). — Feri, May 07 '23 at 09:40

why are there overlapping google chart columns?

1 Answers1