CODEWITHSUNDEEP
javascriptchartsgoogle-visualizationcolumn-chart
SAI GIRI CHARY AOUSULA
SAI GIRI CHARY AOUSULA

Reputation: 226

Displaying type name on bars in google column charts

I am using Google Column charts.

As of now I got my chart as shown in the below image. enter image description here

Here I have two columns in each category. I want to differentiate them by their type(Type-1, Type-2) like shown in the below image. How can I do this, is there any possibility for this. enter image description here

Upvotes: 1

Views: 67

Answers (1)

WhiteHat
WhiteHat

Reputation: 61222

you can use a data column role for --> 'annotation'

the 'annotation' column should follow each value it represents in the data table

see following working snippet... 

google.charts.load('current', {
  packages: ['corechart']
}).then(function () {
  var data = new google.visualization.DataTable();
  data.addColumn('string', 'Category Type');
  data.addColumn('number', 'Type-1');
  data.addColumn({role: 'annotation', type: 'string'});
  data.addColumn('number', 'Type-2');
  data.addColumn({role: 'annotation', type: 'string'});
  data.addRows([
    ['Pri #1:', 4000, 'Type-1', 5000, 'Type-2'],
    ['Pri #2:', 6000, 'Type-1', 8000, 'Type-2'],
    ['Pri #3:', 1500, 'Type-1', 3000, 'Type-2'],
  ]);

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

Upvotes: 1

Related Questions