How to place a text on morris.js bar graph

Question

I have a morris.js bar graph. I want to place count on top of this graph. I looked into morris.js bar doc, could not find any.

On hover it should display

Answer 1

Here is a start, its a bit hacky, but it gets the job done:

JS

    var graphData= [
    {mapname: 's1', value: 10, count: 3},
    {mapname: 's2', value: 4, count: 4},
    {mapname: 's3', value: 12, count: 13}
  ]; //store this to its own var so we can access the counts later


var bar=Morris.Bar ({
  element: 'bar-example',
  data:graphData,
  xkey: 'mapname',
  ykeys: ['value'],
  labels: ['No. of days'],
  barSizeRatio:0.4, //I think you meant barSizeRatio, not barSize
  xLabelAngle: 35,
  hideHover: 'auto',
  barColors: function (row, series, type) {
    //console.log("--> "+row.label, series, type);
    if(row.label == "s1") return "#AD1D28";
    else if(row.label == "s2") return "#DEBB27";
    else if(row.label == "s3") return "#fec04c";
  }
});


//first, find the width of a bar
//this is bar-example width, divided by three, times barSizeRatio
var barWidth=($('#bar-example').width()/3)*(0.4);

//now each thru each bar (rect)

jQuery('rect').each(function (i) {
  var pos=$(this).offset();
  var top=pos.top;
  top-=20; //originate at the top of the bar

  //get the height of the bar
  var barHeight=bar.bars[i];
  top+=barHeight/2; //so we can now stick the number in the vertical-center of the bar as desired
  var left=pos.left;
  //move it over a bit
  left+=barWidth/2; 
  //-size of element...
  left-=10;//should approximately be horizontal center

  $div=jQuery('
'); 
  $div.text(graphData[i].count); //get the count
  jQuery('body').append($div); //stick it into the dom
  console.log($div);
});

and some CSS to style the divs

CSS

.count{
  position:absolute;
  width:10px;
  height:20px;
  line-height:20px;
  color:white;
  font-weight:bold;
  }

hopefully you can run with that to create the exact effect you are looking for