score:0

use the latest version of chart.js (2.7.1):

var canvas = document.getelementbyid('mychart');
var raw = [
  {start: '0', end: '10', data: [{}]},
  {start: '10', end: '20', data: [{},{},{}]},
  {start: '20', end: '30', data: [{},{}]},
  {start: '30', end: '40', data: [{},{},{},{}]},
  {start: '40', end: '50', data: [{},{},{},{},{}]},
  {start: '50', end: '60', data: [{},{},{},{},{},{}]},
];
var data = {
    labels: raw.map((r) => '$' + r.start).concat('$' + raw[raw.length - 1].end),
    datasets: [
        {
            backgroundcolor: ["red","orange","yellowgreen","green","violet", "rebeccapurple"],
            data: raw.map((r) => r.data.length*(1.73 * math.random())),
        }
    ]
};
function getyticks() { return [0, 10]};
function formatz(v) { return 'e' + v; };
function formaty(v) { return '$' + v + '.00'; };
var option = {
  legend: {
        display: false,
      },
      layout: {
        padding: {
          left: 10,
          top: 10,
          right: 10,
          bottom: 10,
        },
      },
	scales: {
  	yaxes:[{
        scalelabel: {
            display: true,
            labelstring: 'y',
            fontfamily: 'lato',
            fontsize: 14,
          },
          ticks: {
            beginatzero: true,
            padding: 10,
            fontfamily: 'lato',
            fontsize: 14,
          },
          afterbuildticks: getyticks(),
          gridlines: {
            display: true,
            color: 'rgba(50,50,50,0.2)',
            zerolinecolor: 'rgba(50,50,50,0.5)',
            zerolinewidth: 2,
            drawticks: true,
            tickmarklength: 4,
          },
    }],
    xaxes:[{
      barpercentage: 0.8,
      categorypercentage: 1,
      gridlines: {
            display: false,
            tickmarklength: 10,
            color: 'rgba(50,50,50,0.1)',
            drawticks: false,
            offsetgridlines: false,
            zerolinecolor: 'rgba(50,50,250,0.5)',
            zerolinewidth: 5,
      },
      scalelabel: {
            display: true,
            labelstring: 'pages',
            padding: 20,
            fontfamily: 'lato',
            fontsize: 14,
          },
      ticks: {
            beginatzero: true,
            callback: formatz,
            fontfamily: 'lato',
            fontsize: 14,
          },
    }]
  }
};

var mybarchart = chart.bar(canvas,{
	data:data,
  options:option
});
#mychart {
   border: 1px solid black;
}
<script src="https://unpkg.com/moment@2.14.1/min/moment.min.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/chart.js/2.7.1/chart.js"></script>

<canvas id="mychart" width="400" height="300"></canvas>


Related Query

More Query from same tag