Data sensitive aligning (depending on bar length not value)

[bitflower]

Hi, I came across your plugin because it was recommended here: https://stackoverflow.com/questions/31631354/how-to-display-data-values-on-chart-js.

How can I achieve a data sensitive shift of the align parameter? There doesnt seem to be a logic build in as my example chart shows:

I need to switch the align parameter depending on the draw height / width of the bar.
In the align function I have implemented for the "align" parameter I have access to the chart instance, context etc. but the height of the ChartElement for all data is undefined.

Is this possible?

[simonbrunel]

It's a bit tricky to implement because these information (bar coordinates) are private and can change without notice, breaking your code. You can still do it using scriptable options, but I can't guarantee that it will work forever (see this fiddle):

options: {
  plugins: {
    datalabels: {
      align: function(context) {
         var chart = context.chart;
         var area = chart.chartArea;
         var meta = chart.getDatasetMeta(context.datasetIndex);

         // WARNING: meta.data._model is PRIVATE and thus can 
         // change without notice, breaking code relying on it!
         var model = meta.data[context.dataIndex]._model;
         var bottom = Math.min(model.base, area.bottom);
         var height = bottom - model.y;
         return height < 50 ? 'end' : 'start'
       },
       // ...
    }
  }
}

[bitflower]

I can live with that restriction.

Thanks so much for the snippet.

I adapted it for horizontal barcharts:

// Source: https://github.com/chartjs/chartjs-plugin-datalabels/issues/13
var chart = context.chart;
var area = chart.chartArea;
var meta = chart.getDatasetMeta(context.datasetIndex);

// WARNING: meta.data._model is PRIVATE and thus can 
// change without notice, breaking code relying on it!
var model = meta.data[context.dataIndex]._model;
//var bottom = Math.min(model.base, area.bottom);
var height = model.x - area.left; //bottom - model.y;
return height < 50 ? 'end' : 'start'

Would you say this is correct?

[simonbrunel]

For horizontal bar, maybe:

//...
// WARNING: meta.data._model is PRIVATE and thus can 
// change without notice, breaking code relying on it!
var model = meta.data[context.dataIndex]._model;
var left = Math.max(model.base, area.left);
var width = model.x - left;
return width < 25 ? 'end' : 'start'

[bitflower]

Thanks @simonbrunel this helps me a lot !