Make Google-Hartbar Preview Start From Scratch

Question

I have a chart of google Charts on the system that may come zeroed, in case it comes zeroed I need to start from 0, but I’m not able to configure, I tried to use viewWindow.min but it doesn’t work.

To documentation does not mention anything about.

google.charts.load('current', {
  packages: ['corechart', 'bar']
});
google.charts.setOnLoadCallback(drawBasic);

function drawBasic() {

  var data = google.visualization.arrayToDataTable([
    [
      "",
      "",
      {
        "role": "style"
      },
      {
        "role": "annotation"
      }
    ],
    [
      "A",
      0,
      "#64BBF6",
      "0 | R$ 0,00"
    ],
    [
      "B",
      0,
      "#2A8FD7",
      "0 | R$ 0,00"
    ],
    [
      "C",
      0,
      "#0862A2",
      "0 | R$ 0,00"
    ],
    [
      "D",
      0,
      "#64BBF6",
      "0 | R$ 0,00"
    ]
  ]);

  var options = {
    title: '',
    chartArea: {
      width: '60%'
    },
    height: 100,
    hAxis: {
      title: '',
      viewWindow: {
        min: 0,
      },
    },
    vAxis: {
      title: '',
      viewWindow: {
        min: 0,
      },
    },
    legend: {
      position: "none"
    },
    annotations: {
      textStyle: {
        bold: true
      },
      alwaysOutside: true
    },
    tooltip: {
      trigger: "none"
    }
  };

  var chart = new google.visualization.BarChart(document.getElementById('chart_div'));

  chart.draw(data, options);
}

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>

In the example above it starts from -1, I need to make it start from 0, even when there is no data

Answer 1

Actually your chart already starts on 0, it only generates the negatives when none of the values is greater than zero. I can’t tell why this occurs, but you can get around using the hAxis.ticks to replace this automatic generation.

I changed your options hAxis adding to it:

hAxis: {
    title: '',
    ticks: [0,1,2,3],
    viewWindow: {
    min: 0,
}

See working in your example below:

google.charts.load('current', {
  packages: ['corechart', 'bar']
});
google.charts.setOnLoadCallback(drawBasic);

function drawBasic() {

  var data = google.visualization.arrayToDataTable([
    [
      "",
      "",
      {
        "role": "style"
      },
      {
        "role": "annotation"
      }
    ],
    [
      "A",
      0,
      "#64BBF6",
      "0 | R$ 0,00"
    ],
    [
      "B",
      0,
      "#2A8FD7",
      "0 | R$ 0,00"
    ],
    [
      "C",
      0,
      "#0862A2",
      "0 | R$ 0,00"
    ],
    [
      "D",
      0,
      "#64BBF6",
      "0 | R$ 0,00"
    ]
  ]);

  var options = {
    title: '',
    chartArea: {
      width: '60%'
    },
    height: 100,
    hAxis: {
      title: '',
      ticks: [0,1,2,3],
      viewWindow: {
        min: 0,
      },
    },
    vAxis: {
      title: '',
      viewWindow: {
        min: 0,
      },
    },
    legend: {
      position: "none"
    },
    annotations: {
      textStyle: {
        bold: true
      },
      alwaysOutside: true
    },
    tooltip: {
      trigger: "none"
    }
  };

  var chart = new google.visualization.BarChart(document.getElementById('chart_div'));

  chart.draw(data, options);
}

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>