CODEWITHSUNDEEP
javascriptchartsgoogle-visualization
WJA
WJA

Reputation: 7004

How to display a small bar even when a value is zero in Google Charts?

I have sometimes series where the values are all zero. When I apply a ColumnChart the figure is all empty, not showing that there are actually zero values.

How can I display the bars even when the values are zero?

I tried the following options:

{
     type: options.type,
     cssStyle: options.cssStyle,
     data: {},
     options: {
                chartArea:{width:'80%'},
                pointsVisible: true,
                lineWidth: 4,
                curveType: "none",
                fontName: "Open Sans",
                fontSize: 10,
                colors: options.colors,
                isStacked: "false",
                fill: 10,
                displayExactValues: true,
                vAxis: {viewWindowMode:'explicit', minValue: -1, viewWindow: {min:0}, gridlines: {"color": "#f2f2f2", "count": 2}, baselineColor: "#f2f2f2", textStyle: options.textStyle},
                hAxis: {gridlines: {"color": "#f2f2f2"}, baselineColor: "#f2f2f2", textStyle: options.textStyle},
                legend: {position: 'bottom', alignment: 'center', textStyle: options.textStyle},
}

Upvotes: 4

Views: 1883

Answers (2)

Difster
Difster

Reputation: 3270

In your code, test for zero values and convert that to .1 or whatever is appropriate for your scale.

function vAxisTest (vAxis) {
   let scale = .1; //
   if(vAxis === 0) { 
       vAxis = scale;
       return scale;
   }
  else { return vAxis; }
}

Upvotes: 1

WhiteHat
WhiteHat

Reputation: 61212

a bar will only be displayed if the value is not equal to zero

however, using object notation, we can provide the value (v:) and the formatted value (f:)

using the following, the bar will display, but when hovered, the tooltip shows a value of zero 

{v: 0.1, f: '0'}

see following working snippet... 

google.charts.load('current', {
  packages: ['corechart']
}).then(function () {
  var chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));

  var data = google.visualization.arrayToDataTable([
    ['x', 'y'],
    ['A', {v: 0.1, f: '0'}],
    ['B', 2],
    ['C', 3],
    ['D', 4]
  ]);

  google.visualization.events.addListener(chart, 'ready', function () {
    chart.setSelection([{row: 0, column: 1}]);
  });

  chart.draw(data, {
    tooltip: {
      trigger: 'both'
    }
  });
});
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>

Upvotes: 5

Related Questions