Trying to place labels on bar chart

22 views

Skip to first unread message

Carl Castillo

unread,

Jun 12, 2020, 2:17:14 PM6/12/20

to Google Visualization API

Hi all, I have a bar chart with the 2 columns "Year", "Count". I am trying to put the count number as a label for my bar. I went to the Google Charts API Bar Chart label section and I attempted placing the dataTable into a view and setting the columns with css. however, the labels are not still showing up.

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

      function drawDateRangeColumnChart() {

var dateRangeDataTable = google.visualization.arrayToDataTable([
            ['Year', 'Count'],
            ['2020',18078],
            ['2012',5]
]);

var view = new google.visualization.DataView(dateRangeDataTable);
      view.setColumns([0, 1,
                       { calc: "stringify",
                         sourceColumn: 1,
                         type: "string",
                         role: "annotation" },
                       ]);

var dateRangeOptions = { 
        chart: { title: 'Date Range Per Year', 
                 width: 100, 
                 height: 100,
                 bar: {groupWidth:"95%"},
                }
            }; 
        var dateRangeChart = new google.charts.Bar(document.getElementById("dateRangeChart_values")); 
        dateRangeChart.draw(view, google.charts.Bar.convertOptions(dateRangeOptions)); }
    </script>
  </head>
  <body>
    <div id="dateRangeChart_values" style="width: 400px; height: 300px;"></div>
    </body>
</html>

Reply all

Reply to author

Forward

0 new messages