Label inside bar and on top of column chart - Javascript Google Chart

Javascript examples for Google Chart:Column Chart

  1. HOME
  2. Javascript
  3. Google Chart
  4. Column Chart

Description

Label inside bar and on top of column chart

Demo Code

ResultView the demo in separate window 

<html>
   <head> 
      <title>An Example of a Google Bar Chart</title> 
      <meta name="viewport" content="width=device-width, initial-scale=1"> 
   </head> 
   <body> 
      <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() {/*from  ww  w  . j ava2 s  . c  o m*/
      var data = new google.visualization.DataTable();
      data.addColumn('timeofday', 'Time of Day');
      data.addColumn('number', 'Motivation Level');
      data.addColumn({type:'string', role:'annotation'});
      data.addColumn('number', 'Energy Level');
      data.addColumn({type:'string', role:'annotation'});
      data.addColumn('number', 'test Level');
      data.addColumn({type:'string', role:'annotation'});
      data.addColumn('number', 'Motivation Level');
      data.addColumn({type:'string', role:'annotation'});
      data.addRows([
        [{v: [9, 0, 0], f: '8 am'},{v:40,f:"asd"},"q",{v:40,f:"asd"},"q",{v:40,f:"asd"},"q",{v:0},"q"],
        [{v: [10, 0, 0], f: '8 am'},{v:40,f:"asd"},"q",{v:40,f:"asd"},"q",{v:40,f:"asd"},"q",{v:0},"q"],
        [{v: [11, 0, 0], f: '8 am'},{v:100,f:"asd"},"q",{v:40,f:"asd"},"q",{v:40,f:"asd"},"q",{v:0},"q"],
      ]);
      var options = {
        title: 'Motivation and Energy Level Throughout the Day',
        isStacked: true,
        annotations: {
        alwaysOutside : false,
          textStyle: {
            fontSize: 14,
            color: '#000',
            auraColor: 'none'
          }
        },
        hAxis: {
          title: 'Time of Day',
          format: 'h:mm a',
        },
        vAxis: {
          title: 'Rating (scale of 1-10)',
          viewWindow:{
                max:200,
                min:0
              }
        },
        colors: ["blue","red","green","transparent"],
        bar: {groupWidth: "95%"},
      };
      var chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));
      chart.draw(data, options);
    }

      </script>  
   </body>
</html>

Related Tutorials