Interval columns add padding left/right to google line chart

Question

I have an annoying problem. I'm creating a google line chart with an area-interval. As soon as I give the interval-columns the role: 'interval' the chart creates some sort of left and right boundary inside my linechart. How can I get rid of this?

This is my chart-code:

    chartType: 'LineChart',
    dataTable: {
      cols: [
        {type: 'date', label: 'datum'},
        {type: 'number', label: 'activatie'},
        {id: 'i0', type: 'number', p: {role: 'interval'}},
        {id: 'i1', type: 'number', p: {role: 'interval'}}
      ],
      rows: []
    },
    options: {
      height: 70,
      hAxis: {
        gridlines: {
          color: 'none'
        },
        format: 'd MMM',
        ticks: [],
        viewWindowMode: 'maximized'
      },
      vAxis: {
        minValue: 0,
        gridlines: {
          color: 'none'
        },
        baseline: { color: 'none' },
        textPosition: 'none'
      },
      chartArea: {
        width: '100%',
        height: 50,
        bottom: 20,
        left: 0,
        right: 0,
        backgroundColor: {
          fill: blauw1,
          fillOpacity: 0.05,
        }
      },
      backgroundColor: { fill: 'none' },
      legend: 'none',
      intervals: {style: 'area', color: blauw5},
      fontName: FONT_FAMILY,
      tooltip: { trigger: 'none' },
      pointsVisible: false,
      colors: [blauw1],
      areaOpacity: 0.0,
    }
  };```

This is how my chart look's like when the 2 interval-columns don't have the ```role: 'interval'``` added:

[without role: interval][1]

This is how my chart look's like when the 2 interval-columns have the ```role: 'interval'``` added:

[with role: interval][2]

  [1]: https://i.sstatic.net/zpT3D.png
  [2]: https://i.sstatic.net/0x3XG.png

Answer 1

instead of using option --> hAxis.viewWindowMode: 'maximized'

use a distinct view window using the min and max dates from the data...

hAxis.viewWindow: data.getColumnRange(0)

see following working snippet...

google.charts.load('current', {
  packages: ['corechart']
}).then(function () {
  var data = new google.visualization.DataTable({
    cols: [
      {type: 'date', label: 'datum'},
      {type: 'number', label: 'activatie'},
      {id: 'i0', type: 'number', role: 'interval'},
      {id: 'i1', type: 'number', role: 'interval'}
    ],
    rows: [
      {c:[{v: new Date(2020, 0, 27)}, {v: 10}, {v: 8}, {v: 12}]},
      {c:[{v: new Date(2020, 0, 29)}, {v: 12}, {v: 10}, {v: 14}]},
      {c:[{v: new Date(2020, 0, 31)}, {v: 14}, {v: 12}, {v: 16}]},
      {c:[{v: new Date(2020, 1, 2)}, {v: 10}, {v: 8}, {v: 12}]}
    ]
  });

  var chart = new google.visualization.ChartWrapper({
    chartType: 'LineChart',
    containerId: 'chart',
    dataTable: data,
    options: {
      height: 70,
      hAxis: {
        gridlines: {
          color: 'none'
        },
        format: 'd MMM',
        ticks: [],
        viewWindow: data.getColumnRange(0)
      },
      vAxis: {
        minValue: 0,
        gridlines: {
          color: 'none'
        },
        baseline: { color: 'none' },
        textPosition: 'none'
      },
      chartArea: {
        width: '100%',
        height: 50,
        bottom: 20,
        left: 0,
        right: 0,
        backgroundColor: {
          fill: 'cyan',
          fillOpacity: 0.05,
        }
      },
      backgroundColor: { fill: 'none' },
      legend: 'none',
      intervals: {style: 'area', color: 'blue'},
      //fontName: FONT_FAMILY,
      tooltip: { trigger: 'none' },
      pointsVisible: false,
      //colors: [blauw1],
      areaOpacity: 0.0,
    }
  });

  chart.draw();
});

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