How to makes lines on Google Charts Linechart to start from point 0, 0 (angular-google-charts)

Question

I would like to make the lines of the linechart to start from the left-bottom part of the graph and then go up to the first item (right), instead of just starting from the first item (left).

I tried adding a [null, 0, 0], but that just creates a new column, which adds some space between the beginning of the HAxis and the beginning of the lines.

Demo

Answer 1

in order for the line to begin at zero, at point must exist at 0, 0

but I think you will have better luck using an x-axis that is continuous (numeric) vs. discrete (string)

we can use object notation to provide a numeric value while still displaying a string
where v is the value and f is the formatted value

{v: 1, f: 'Value 1'}

we can use this in both the data table values, as well as the axis ticks.

see following working snippet...

google.charts.load('current', {
  packages: ['corechart']
}).then(function () {
  var data = google.visualization.arrayToDataTable([
    ['Values', 'Line 1', 'Line 2'],
    [{v: 0, f: ''}, 0, 0],
    [{v: 1, f: 'Value 1'}, 20, 10],
    [{v: 2, f: 'Value 2'}, 40, 50],
    [{v: 3, f: 'Value 3'}, 50, null]
  ]);

  var options = {
    hAxis: {
      ticks: [  // ticks to display on the x-axis
        {v: 0, f: ''},
        {v: 1, f: 'Value 1'},
        {v: 2, f: 'Value 2'},
        {v: 3, f: 'Value 3'},
        {v: 4, f: ''}
      ],
      title: 'HAxis'
    },
    vAxis: {
      title: 'VAxis'
    },
    curveType: 'function'
  };

  var chart = new google.visualization.LineChart(document.getElementById('chart'));
  chart.draw(data, options);
});

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

(obviously, the above snippet is not angular, but works the same...)