score:-1

i was able to get a working chart by removing the min and max values set.

here is the jsfiddle

was the following image the desired outcome?

enter image description here

score:0

this fiddle may help to place the data label in the center of the bar https://jsfiddle.net/tea8dhgy/

<div id="container" style="width: 75%;">
  <canvas id="canvas"></canvas>
</div>       
 var barchartdata = {
      labels: ["2015-01-01", "2015-02-01", "2015-03-01", "2015-04-01", "2015-05-01", "2015-07-01"],
      datasets: [{
        label: 'dataset 1',
        backgroundcolor: "rgba(220,220,220,0.5)",
        data: [10, 4, 5, 7, 2, 3]
      }]

    };


    var ctx = document.getelementbyid("canvas").getcontext("2d");
    new chart(ctx, {
      type: 'bar',
      data: barchartdata,
      options: {
        elements: {
          rectangle: {
            borderwidth: 2,
            bordercolor: 'rgb(0, 255, 0)',
            borderskipped: 'bottom'
          }
        },
        responsive: true,
        legend: {
          position: 'top',
        },
        title: {
          display: true,
          text: 'chart.js bar chart'
        },
        scales: {
          xaxes: [{
            categorypercentage: .5,
            barpercentage: 1,
            type: 'time',
            scalelabel: {
              display: true,
              labelstring: 'year-month'
            },
            time: {
              // min: '2014-12-01' ,
              // max: '2015-12-01',
              unit: 'month',
              displayformats: {
                month: "mmm yy"
              }
            },
            gridlines: {
              offsetgridlines: false,
              drawticks: true,
              display: true
            },
            stacked: true
          }],
          yaxes: [{
            ticks: {
              beginatzero: true
            },
            stacked: true
          }]
        },
        animation: {
          oncomplete: function() {
            var chartinstance = this.chart,
              ctx = chartinstance.ctx;

            ctx.font = chart.helpers.fontstring(10, "bold", chart.defaults.global.defaultfontfamily);
            ctx.textalign = 'center';
            ctx.textbaseline = 'center';

            this.data.datasets.foreach(function(dataset, i) {
              var meta = chartinstance.controller.getdatasetmeta(i);
              meta.data.foreach(function(bar, index) {
                //var data = dataset.data[index];
                var data = dataset.data[index];
                console.log(bar);
                if (data > 0) {
                  ctx.filltext(data, bar._model.x, bar._model.base - (bar._model.base - bar._model.y) / 2 - 5);
                }
              });
            });
          }
        }
      }
    });

Related Query

More Query from same tag