Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to avoid overlapping label's on the Bar in google bar charts?

I'm creating a stacked bar graph and need to show the label inside the stack. But Few of the label's are getting overlapped. for reference image

Can you please help me how to avoid overlapping using google charts ?

<html>
<head>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
  <div id="chart_div"></div>
 <script type="text/javascript">
  google.charts.load('current', {packages: ['corechart', 'bar']});
  google.charts.setOnLoadCallback(drawStacked);

function drawStacked() {
      var data = new google.visualization.arrayToDataTable([['Time Period','XYZ',{ role: 'annotation'},'ABC',{ role: 'annotation'},{ role: 'annotation'},'Average'],
        ['Aug', 3754,'3754', 2089,'2089','5,843',4000],
        ['Sept', 900,'900', 200,'200', '100',4000],
		['Oct', 2000,'2000', 4900,'4900', '6000',4000],
		['Nov', 1700,'1700', 2200,'2200', '3900',4000],
		['Dec', 2400,'2400', 2089,'2200', '4600',4000]
      ]);

      var options = {
        title: 'Overview of the Tickets',
        isStacked: true,
		orientation: 'horizontal',
        hAxis: {
          title: 'Time Period',
          annotations: {}
           },
        vAxis: {
          title: 'Number of Tickets'
        },
		seriesType: 'bars',
      series: {2: {type: 'line'}}
      };

      var chart = new google.visualization.ComboChart(document.getElementById('chart_div'));
      chart.draw(data, options);
    }
  </script>
</head>

</html>

Regards, Srikanth

like image 937
Srikanth Avatar asked Sep 29 '16 12:09

Srikanth


People also ask

How do you avoid overlapping text in tableau?

In Marks, if you click on the Label icon, at the bottom of the menu uncheck "Allow labels to overlap other marks". You can also manually select and move the overlapping labels right on the chart.

How do I rotate a Google bar graph?

Use the series option to define two separate horizontal axes for the chart. Set the direction option on the second horizontal axis to -1 to make the values extend from the right side of the chart.

How do you change the width of a bar in a Google chart?

Right-click on any column inside your chart. Select 'Format data series'. Drag the slider under the 'Gap width' to the right to make the columns thinner and to the left to make the columns wider.


2 Answers

first, it appears you have an extra annotation column in your data,
that doesn't appear to belong to a specific column

copied from question above...

var data = new google.visualization.arrayToDataTable([
  [
    'Time Period',
    'XYZ',
    {role: 'annotation'},
    'ABC',
    {role: 'annotation'},
    {role: 'annotation'},  // <-- extra annotation?
    'Average'
  ],
  [
    'Aug',
    3754,
    '3754',
    2089,
    '2089',
    '5,843',  // <-- extra annotation?
    4000
  ],
  ...
]);

this could be part of the reason it's so cluttered

regardless, use the annotations configuration option for adjustments

the config option can be used for the entire chart, or just for a specific series

var options = {
  // entire chart
  annotations: {
    textStyle: {
      fontSize: 10
    }
  },
  series: {
    0: {
      // series 0
      annotations: {
        stem: {
          length: 0
        },
      },
    },
    1: {
      // series 1
      annotations: {
        stem: {
          length: 16
        }
      },
    },
  }
  ...
};

specifically, you can use a combination of annotations.textStyle.fontSize and annotations.stem.length to prevent overlapping

see following working snippet...

annotations.textStyle.fontSize is reduced for the entire chart
this allows the first annotation on the second column to fit within the bar

annotations.stem.length is set to zero (0) on the first series,
and 16 on the second...

(the extra annotation from the question has been removed)

google.charts.load('current', {
  callback: drawStacked,
  packages: ['corechart']
});

function drawStacked() {
  var data = new google.visualization.arrayToDataTable([
    ['Time Period', 'XYZ', {role: 'annotation'}, 'ABC', {role: 'annotation'}, 'Average'],
    ['Aug', 3754, '3754', 2089, '2089', 4000],
    ['Sept', 900, '900', 200, '200', 4000],
    ['Oct', 2000, '2000', 4900, '4900', 4000],
    ['Nov', 1700, '1700', 2200, '2200', 4000],
    ['Dec', 2400, '2400', 2089, '2200', 4000]
  ]);

  var options = {
    annotations: {
      textStyle: {
        fontSize: 10
      }
    },
    series: {
      0: {
        annotations: {
          stem: {
            length: 0
          },
        },
      },
      1: {
        annotations: {
          stem: {
            length: 16
          }
        },
      },
      2: {
        type: 'line'
      }
    },
    hAxis: {
      title: 'Time Period'
    },
    isStacked: true,
    seriesType: 'bars',
    title: 'Overview of the Tickets',
    vAxis: {
      title: 'Number of Tickets'
    }
  };

  var chart = new google.visualization.ComboChart(document.getElementById('chart_div'));
  chart.draw(data, options);
}
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>

EDIT

since the third annotation is needed as the total of the other two stacks,
recommend adding the series value for the total, in addition to the annotation column

and setting the total series type to 'line'
this will place the total annotation above the rest, for sure
so long as there is enough room on the chart to display the annotation above the bars

to ensure enough room above bars, find the max vAxis value, and add a value that will create enough room for the annotation
then set that value as vAxis.viewWindow.max

you can turn off the line and point, and hide the total series from the legend if needed

in my experience, it takes quite a bit of manipulation to get a complex google chart to display nicely

see the following working snippet, which incorporates the third, 'total', annotation...

google.charts.load('current', {
  callback: drawStacked,
  packages: ['corechart']
});

function drawStacked() {
  var data = new google.visualization.arrayToDataTable([
    ['Time Period', 'XYZ', {role: 'annotation'}, 'ABC', {role: 'annotation'}, 'TOTAL', {role: 'annotation'}, 'Average'],
    ['Aug', 3754, '3,754', 2089, '2,089', 5843, '5,843', 4000],
    ['Sept', 900, '900', 200, '200', 1100, '1,100',  4000],
    ['Oct', 2000, '2,000', 4900, '4,900', 6900, '6,900',  4000],
    ['Nov', 1700, '1,700', 2200, '2,200', 3900, '3,900',  4000],
    ['Dec', 2400, '2,400', 2089, '2,089', 4489, '4,489',  4000]
  ]);

  // find max for all columns to set top vAxis number
  var maxVaxis = 0;
  for (var i = 1; i < data.getNumberOfColumns(); i++) {
    if (data.getColumnType(i) === 'number') {
      maxVaxis = Math.max(maxVaxis, data.getColumnRange(i).max);
    }
  }

  var options = {
    annotations: {
      textStyle: {
        fontSize: 10
      }
    },
    series: {
      0: {
        annotations: {
          stem: {
            length: 0
          },
        }
      },
      1: {
        annotations: {
          stem: {
            length: 2
          }
        }
      },
      2: {
        annotations: {
          stem: {
            color: 'transparent',
            length: 16
          }
        },
        color: 'black',
        lineWidth: 0,
        pointShape: 'square',
        pointSize: 0,
        type: 'line',
        visibleInLegend: false
      },
      3: {
        type: 'line'
      }
    },
    hAxis: {
      title: 'Time Period'
    },
    isStacked: true,
    seriesType: 'bars',
    title: 'Overview of the Tickets',
    vAxis: {
      title: 'Number of Tickets',
      viewWindow: {
        max: maxVaxis + 2000
      }
    }
  };

  var chart = new google.visualization.ComboChart(document.getElementById('chart_div'));
  chart.draw(data, options);
}
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>
like image 160
WhiteHat Avatar answered Sep 25 '22 09:09

WhiteHat


I think it happens because there's not enough vertical space for the labels.

Try this:

  1. Save the highest value of the graph (let's call it maxNumber)

  2. In the "options" set vAxis maxValue to be maxNumber plus a little more.

I have 4 horizontal lines in my graph so I wrote:

var options = {
                title: chartTitle,
                ....... //Your options
                vAxis: {
                    //Add more space in order to make sure the annotations are not overlapping
                    maxValue: maxNumber + maxNumber/4,
                },
like image 43
Oranit Dar Avatar answered Sep 24 '22 09:09

Oranit Dar