Force annotations to display above columns in column chart - Javascript Google Chart

Javascript examples for Google Chart:Column Chart

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

Description

Force annotations to display above columns in column chart

Demo Code

ResultView the demo in separate window 

<html>
   <head> 
      <meta name="viewport" content="width=device-width, initial-scale=1"> 
   </head> 
   <body> 
      <link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet" type="text/css"> 
      <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> 
      <script type="text/javascript">
  google.charts.load("current", {
    packages: ['corechart']
  });//from  w w w. j  a  v  a 2s .co m
  google.charts.setOnLoadCallback(drawChart);
  function drawChart() {
    var data = google.visualization.arrayToDataTable([
      ["Mana Cost", "Cards"],
      ["0", 1],
      ["1", 2],
      ["2", 3],
      ["3", 4],
      ["4", 4],
      ["5", 3],
      ["6", 2],
      ["7+", 1],
    ]);
      var maxV = 0;
    for (var i = 0; i < data.getNumberOfRows(); i++) {
          if(data.getValue(i, 1) > maxV) {
              maxV = data.getValue(i, 1);
        }
    }
    maxV++;
    var view = new google.visualization.DataView(data);
    view.setColumns([0, 1, {
      calc: "stringify",
      sourceColumn: 1,
      type: "string",
      role: "annotation",
    }, ]);
    var options = {
      title: "Cards/Mana Cost",
      width: '750',
      height: '375',
      backgroundColor: "#FFF",
      enableInteractivity: false,
      bar: {
        groupWidth: "90%"
      },
      legend: {
        position: "none"
      },
      annotations: {
        alwaysOutside: true,
        stem: {
          color: "transparent"
        },
        textStyle: {
          fontName: 'Lato',
          fontSize: 18.75,
          bold: true,
          italic: false,
          auraColor: 'transparent',
          color: "#000"
        }
      },
      chartArea: {
         width: '95%',
        backgroundColor: "#FFF"
      },
      titleTextStyle: {
        color: "#000",
        fontName: "Lato",
        fontSize: 25,
        bold: true,
        italic: false
      },
      vAxis: {
         viewWindow:{
           max:maxV,
         },
        gridlines: {
          color: 'transparent'
        },
        textPosition: "none"
      },
      hAxis: {
        textStyle: {
          color: "#000",
          fontName: "Lato",
          fontSize: 18.75,
          bold: true,
          italic: false
        }
      }
    };
    var chart = new google.visualization.ColumnChart(document.getElementById("columnchart_values"));
    chart.draw(view, options);
  }

      </script> 
      <div id="columnchart_values" style="width: 900px; height: 300px;"></div>  
   </body>
</html>

Related Tutorials