I'm currently tying to use this plugin to render labels over bars on a horizontal stacked bar chart. My aim is to have something that matches a Gantt chart.
We already have this working with this plugin as part of a server-side chart renderer which we use to generate images of client-side charts. This is done using node and the napi-rs/canvas package and the result looks a little something like this, which is exactly what we want:
Some of the labels are missing for some of the smaller bars, which is intentional.
The problem is that we use the exact same chart configuration on the client but get a chart where the labels are way out of position, which looks like this (i've made the label colour black on the client so its easier to see where the labels are):
Both the client and the chart rendered are using Chart.js v4.4.1 and chartjs-plugin-datalabels v2.2.0, and this is the chart definition we are using for both examples:
Something to mention is that on the client we are using the react-chartjs-2 package to render the chart (as our front end is all React), but we still have the same issue if don't use this package and instead just pass a reference to our blank canvas in to the Chart constructor.
Another thing to mention that might not be relevant, but on the client the following line in the plugins.datalabels.display callback fails as the canvas has no context (and I have to replace .context with .getContext("2d")) but the context is defined in the server-side renderer when the callback is invoked:
Hello,
I'm currently tying to use this plugin to render labels over bars on a horizontal stacked bar chart. My aim is to have something that matches a Gantt chart.
We already have this working with this plugin as part of a server-side chart renderer which we use to generate images of client-side charts. This is done using node and the napi-rs/canvas package and the result looks a little something like this, which is exactly what we want:
Some of the labels are missing for some of the smaller bars, which is intentional.
The problem is that we use the exact same chart configuration on the client but get a chart where the labels are way out of position, which looks like this (i've made the label colour black on the client so its easier to see where the labels are):![wrong_labels](https://github.com/chartjs/chartjs-plugin-datalabels/assets/6146966/90bb6292-c207-4432-aa26-50c823582493)
Both the client and the chart rendered are using Chart.js v4.4.1 and chartjs-plugin-datalabels v2.2.0, and this is the chart definition we are using for both examples:
Something to mention is that on the client we are using the react-chartjs-2 package to render the chart (as our front end is all React), but we still have the same issue if don't use this package and instead just pass a reference to our blank canvas in to the Chart constructor.
Another thing to mention that might not be relevant, but on the client the following line in the plugins.datalabels.display callback fails as the canvas has no context (and I have to replace .context with .getContext("2d")) but the context is defined in the server-side renderer when the callback is invoked:
Do you happen to know why we are having this issue and what we might be able to do to resolve it? Thanks very much
Nik Howard