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'
    },
  },
};

Answer 1

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>