Google Charts - aligning Combo Chart data maximally to left and right

Question

I have a combo chart containing area, bars and line graphs. I'd like the area and line charts to align maximally to the left and right side. For bars chart it's not required. Unfortunately I'm unable to align the graphs properly. I went through the documentation and couldn't find a solution to my problem.

Current chart:

Expected chart:

Here is the GoogleChartInterface object of the chart (I'm adding dataTable and ticks dynamically):

{
  chartType: 'ComboChart',
  dataTable: [],
  options: {
    focusTarget: 'category',
    animation: {
      startup: true,
      easing: 'out',
      duration: 500,
    },
    height: '160',
    chartArea: {
      width: '90%',
      height: '79%',
    },
    vAxes: {
      0: {
        titlePosition: 'none',
        textStyle: {
          color: '#febd02',
          bold: true,
          fontSize: 13,
        },
        format: '#',
        gridlines: {
          color: '#eaeaea',
          count: '5',
        },
        interpolateNulls: true,
      },
      1: {
        titlePosition: 'none',
        format: '#',
        gridlines: {
          color: 'transparent'
        },
        interpolateNulls: true,
      },
      2: {
        groupWidth: '100%',
        titlePosition: 'none',
        textStyle: {
          color: '#0284ff',
          bold: true,
          fontSize: 13,
        },
        format: 'decimal',
        gridlines: {
          color: 'transparent'
        },
      },
    },
    hAxis: {
      textStyle: {
        color: '#393939',
        bold: true,
        fontSize: 13,
      },
      format: 'EEEE',
      gridlines: {
        count: 0,
        color: 'transparent'
      },
      ticks: [],
    },
    series: {
      0: {
        targetAxisIndex: 0,
        type: 'area',
      },
      1: {
        type: 'line'
      },
      2: {
        targetAxisIndex: 2,
        type: 'bars',
        dataOpacity: 0.5,
      },
    },
    colors: [
      '#febd02',
      '#a5a5a5',
      '#0284ff',
    ],
    bar: {
      groupWidth: '35'
    },
    legend: {
      position: 'none'
    },
  },
};

for the x-axis data table column, try using the datetime type, instead of string... — WhiteHat, Nov 12 '20 at 15:33
@WhiteHat I've changed it to datetime, but the result is still the same. I think it's caused by some kind of padding between bars in the bar chart, but I'm not sure how to get rid of them. — Jaruzel, Nov 12 '20 at 15:39
will you please share a sample of the data, code, or at least options used to draw the chart? — WhiteHat, Nov 12 '20 at 16:59
@WhiteHat I've updated the question with the GoogleChartInterface object. — Jaruzel, Nov 13 '20 at 14:02

score 1 · Accepted Answer · answered Nov 13 '20 at 16:13

in order to stretch the area and line series to the edges of the chart,
we must first use a data type that will render a continuous x-axis.
in this case, we will use date time.

next, we use option hAxis.viewWindow to control where the series start and end.
viewWindow has two properties, min & max.
the values of min & max should match the data type of the x-axis.
in this case, we set the values to the dates where the series should begin and end.

hAxis: {
  viewWindow: {
    min: new Date(2020, 10, 13),
    max: new Date(2020, 10, 19)
  }
}

this will stretch the series to the edges of the chart.

see following working snippet for an example...

google.charts.load('current', {
  packages: ['controls', 'corechart']
}).then(function() {
  var data = google.visualization.arrayToDataTable([
    ['Date', 'y0', 'y1', 'y2'],
    [new Date(2020, 10, 13), 100, 50, 25],
    [new Date(2020, 10, 14), 110, 45, 5],
    [new Date(2020, 10, 15), 90, 40, 60],
    [new Date(2020, 10, 16), 80, 30, 10],
    [new Date(2020, 10, 17), 70, 20, 0],
    [new Date(2020, 10, 18), 60, 10, 0],
    [new Date(2020, 10, 19), 50, 5, 0]
  ]);

  var chart = new google.visualization.ChartWrapper({
    chartType: 'ComboChart',
    containerId: 'chart',
    dataTable: data,
    options: {
      focusTarget: 'category',
      animation: {
        startup: true,
        easing: 'out',
        duration: 500,
      },
      chartArea: {
        left: 60,
        top: 12,
        right: 60,
        bottom: 72,
        height: '100%',
        width: '100%'
      },
      height: '100%',
      width: '100%',
      vAxes: {
        0: {
          titlePosition: 'none',
          textStyle: {
            color: '#febd02',
            bold: true,
            fontSize: 13,
          },
          format: '#',
          gridlines: {
            color: '#eaeaea',
            count: '5',
          },
          interpolateNulls: true,
        },
        1: {
          titlePosition: 'none',
          format: '#',
          gridlines: {
            color: 'transparent'
          },
          interpolateNulls: true,
        },
        2: {
          groupWidth: '100%',
          titlePosition: 'none',
          textStyle: {
            color: '#0284ff',
            bold: true,
            fontSize: 13,
          },
          format: 'decimal',
          gridlines: {
            color: 'transparent'
          },
        },
      },
      hAxis: {
        textStyle: {
          color: '#393939',
          bold: true,
          fontSize: 13,
        },
        format: 'dd MMM. yyyy',
        gridlines: {
          color: 'transparent'
        },
        ticks: data.getDistinctValues(0),
        viewWindow: data.getColumnRange(0)
      },
      series: {
        0: {
          targetAxisIndex: 0,
          type: 'area',
        },
        1: {
          type: 'line'
        },
        2: {
          targetAxisIndex: 2,
          type: 'bars',
          dataOpacity: 0.5,
        },
      },
      colors: [
        '#febd02',
        '#a5a5a5',
        '#0284ff',
      ],
      bar: {
        groupWidth: '35'
      },
      legend: {
        position: 'none'
      },
    },
  });
  chart.draw();
});

html, body {
  height: 100%;
  margin: 0px 0px 0px 0px;
  padding: 0px 0px 0px 0px;
}

#chart {
  min-height: 160px;
  height: 100%;
}

<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart"></div>

It's better now, but still not ideal. See the results here: https://i.imgur.com/PxozmRA.png I'd like the area and line charts to also cover the entire bars at the left and right sides. Is it possible? — Jaruzel, Nov 17 '20 at 10:04
not with all three landing on the same exact date. the area and line need to have a date value slightly greater than & less than the min & max values of the bar. note: not all the values need to exist on each row. you can use null for the bar, and / or null for the area and line. — WhiteHat, Nov 17 '20 at 12:26
right, we're almost there, now it somehow breaks the width of the bars though: https://imgur.com/TYnGOnQ I'm guessing that's caused by the distance between the "unexisting" bars (the ones with null) on the sides and the actual first and last bars. Any ideas how to fix it? — Jaruzel, Nov 17 '20 at 12:36
Ok, I've fixed it by increasing the distance between the "unexisting" bars and the actual first and last bars. Now it looks exactly how I wanted it to. Thank you, @WhiteHat! https://imgur.com/LXPnFNw — Jaruzel, Nov 17 '20 at 12:39

Google Charts - aligning Combo Chart data maximally to left and right

1 Answers1