Get height bar? (when animating)

[peteruithoven]

I'd like to only display data labels when they fit inside the bar height of a vertical stacked bar chart.

In issues like chartjs/Chart.js#4663 I'm seeing people retrieve the height of bars using something like the following:

var meta = myChart.getDatasetMeta(0);
var width = meta.data[0]._model.width;

But this _model no longer seems to exist.

When I log the meta.data items they seem to have width and height properties, but it looks like they are filled in after the display function.

What I'm trying to do:

display(context) {
  const chart = chartRef.current;
  if (chart === null) return false;
  const { datasetIndex, dataIndex } = context;
  const meta = chart.getDatasetMeta(datasetIndex);
  const data = meta.data[dataIndex];
  console.log("data.height: ", data.height); // logs NaN
  setTimeout(() => {
    console.log("data.height: ", data.height); // Logs valid number
  }, 1);
  return data.height > 16; // Only show label when it fits
}

I've tried the display auto mode, but this will prefer the later dataset, which is smaller in a lot of cases, which I think is counter intuitive for our users.

Is there a way to control the label display/visibility when the bar heights are available?

[peteruithoven]

I've found a terrible workaround.

A plugin that stores the bar heights after an afterRender event, which then requests another update to trigger the display callbacks.

const TestPlugin = {
    id: "BarHeightPlugin",
    afterRender(chart: ChartJS) {
      barHeights.current = chart.data.datasets.map(
        (dataset: any, datasetIndex: number) => {
          const meta = chart.getDatasetMeta(datasetIndex);
          return dataset.data.map((_: any, dataIndex: number) => {
            const metaData = meta.data[dataIndex];
            return metaData.height;
          });
        },
      );
      if (barHeights.current[0][0] > 0 && renderCount.current === 0) {
        chartRef.current?.update(); // request update to update labels
        renderCount.current++;
      }
    },
  };

A datalabels.display function that uses these heights to conditionally show the labels.

display(context: Context) {
  const { datasetIndex, dataIndex } = context;
  const barHeight =
    barHeights.current?.[datasetIndex]?.[dataIndex] || 0;
  return barHeight > 16; // Only display label when it fits
},

Also note that with this workaround the labels will only appear after the initial animation has finished, because the afterRender call that has the height info is called then.

[peteruithoven]

It looks like my issue is at least caused by the display function only being called before the animation has finished, during which the heights are NaN. When I simply disable the animation there is no issue retrieving the bar heights.

I've made a simple example: https://stackblitz.com/edit/js-7q6chy?file=index.js

[peteruithoven]

I've found @stockiNail comment on a similar issue that suggests using getProps, which enables retrieving the target prop value for the animation.

Example using this principle:

    plugins: {
      datalabels: {
        display(context) {
          const { chart, datasetIndex, dataIndex } = context;
          if (dataIndex === undefined) return false;
          const meta = chart.getDatasetMeta(datasetIndex);
          const model = meta.data[dataIndex];
          console.log('height: ', model.height); // -> NaN when animation enabled
          // passing true you can get the final value of element property
          // at the end of animation
          const { height } = model.getProps(['height'], true);
          console.log('target height: ' + height); // works
          return height > 10; // Only display label when it fits
        },
      },
    },

Full example:
https://stackblitz.com/edit/js-zr2inq?file=index.js