CODEWITHSUNDEEP
javascriptmorris.js
Sher Singh
Sher Singh

Reputation: 287

Morris.js Bar Charts unable to format x-labels

I want to format x-labels in morris.js Bar chart.

Please see this code: http://jsbin.com/uzosiq/258/embed?js,output

xLabelFormat option is not available in Bar chart example which is available in all other type of charts as in https://morrisjs.github.io/morris.js/lines.html but not in https://morrisjs.github.io/morris.js/bars.html

Upvotes: 1

Views: 3219

Answers (1)

krlzlx
krlzlx

Reputation: 5822

Well, it's not specified in the documentation, but you can also use the xLabelFormat for Morris Bar chart.

Please run this snippet to see a working example:

var data = [
  { year: '2014', in: 10, out: 44, inOut: 54 },
  { year: '2015', in: 20, out: 55, inOut: 75 },
  { year: '2016', in: 50, out: 51, inOut: 101 }
],
config = {
  data: data,
  xkey: 'year',
  ykeys: ['in', 'out', 'inOut'],
  labels: ['Total Income', 'Total Outcome', 'Total In/Out'],
  resize: true,
  xLabelFormat: function (x) {
      return "Year [" + x.src.year + "]";
  },
  parseTime: false
};

config.element = 'bar-chart';
Morris.Bar(config);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/raphael/2.1.0/raphael-min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/morris.js/0.5.1/morris.min.js"></script>
<link href="//cdnjs.cloudflare.com/ajax/libs/morris.js/0.5.1/morris.css" rel="stylesheet" />

<div id="bar-chart"></div>

Upvotes: 3

Related Questions