javascripthtmlchartsgoogle-visualizationgchart

Google Charts - avoid showing negative values ​on axis

Even including vAxis: {minValue:0} didn't work

How can I do to avoid showing negative values in the yAxis?

This happens when no value exists. In this case I don't want negative values ​​to appear on the axis

google.charts.load('current', {packages: ['corechart','bar'],'language': 'pt'});
 google.charts.setOnLoadCallback(drawChart);
 
  function drawChart() {

            var arrayToData = [['Date','','Data',{role: 'style'},{role:'tooltip', 'p': {'html': true}}]];

            arrayToData.push(['01/06', 0,0,'','']);
                    arrayToData.push(['02/06', 0,0,'','']);
                    arrayToData.push(['03/06', 0,0,'','']);

            var data = new google.visualization.arrayToDataTable(arrayToData);

            var options = google.charts.Bar.convertOptions(
                {
                tooltip: {isHtml: true},
                chartArea: {
                    height: '100%',
                    width: '100%',
                    top: 38,
                    left: 15,
                    right: 100,
                    bottom: 48
                },
                vAxis: {
               
                    viewWindow:{
                        min: 0
                    }
                },
                yAxis:{
                viewWindowMode: "explicit",
                viewWindow:{
                        min: 0
                    }
                },
                

                series: {
                    0: {enableInteractivity: false,targetAxisIndex: 0, visibleInLegend: false, pointSize: 0, lineWidth: 0,type: 'line',textStyle: {fontSize: 0}},
                    1: { targetAxisIndex: 1, }
                },
                vAxes: {
                    0: {textPosition: 'none'},
                    1: {},
                },

            });
            
        var chart = new google.visualization.ColumnChart(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>

I've tried several alternatives and none have been successful.

Solution

  • try using the ticks option...

                    vAxis: {
                    ticks: [0, 1, 2]
                },

    see following working snippet...

    google.charts.load('current', {packages: ['corechart','bar'],'language': 'pt'});
 google.charts.setOnLoadCallback(drawChart);
 
  function drawChart() {

            var arrayToData = [['Date','','Data',{role: 'style'},{role:'tooltip', 'p': {'html': true}}]];

            arrayToData.push(['01/06', 0,0,'','']);
                    arrayToData.push(['02/06', 0,0,'','']);
                    arrayToData.push(['03/06', 0,0,'','']);

            var data = new google.visualization.arrayToDataTable(arrayToData);

            var options = {
                tooltip: {isHtml: true},
                chartArea: {
                    height: '100%',
                    width: '100%',
                    top: 38,
                    left: 15,
                    right: 100,
                    bottom: 48
                },
                vAxis: {
                    ticks: [0, 1, 2]
                },
                

                series: {
                    0: {enableInteractivity: false,targetAxisIndex: 0, visibleInLegend: false, pointSize: 0, lineWidth: 0,type: 'line',textStyle: {fontSize: 0}},
                    1: { targetAxisIndex: 1, }
                },
                vAxes: {
                    0: {textPosition: 'none'}
                },

            };
            
        var chart = new google.visualization.ColumnChart(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>