Chart.js

Chart.js copied to clipboard

Expected behavior

When a hover on the bottom on a doughnut chart is done, that part is enlarged but should not result in cutting off a part at the bottom.

Current behavior

A part is cut off, see screenshot.

Reproducible sample

https://www.chartjs.org/docs/latest/configuration/canvas-background.html

Optional extra steps/info to reproduce

No response

Possible solution

No response

Context

No response

chart.js version

v3.7.1

Browser name and version

Firefox 97 and Chromium 99

Link to your project

No response

In my oppinion this is the most desired behaviour achievable.

Since the hoveroffset is configurable you will always keep this problem if you put in a high enough number. And if you make it so it doesn't expand it can be considered a bug that you configure an offset but chart.js does not do an offset (or the required amount of offset).

By default you won't have this problem since the hoveroffset is 0 by default.

You can mitigate this issue by making the radius of the doughnut smaller: https://jsfiddle.net/8oav69df/

@LeeLenaleee in my opinion as well, this is the most desired behaviour achievable.

You could also leverage on the layout.padding adding space on bottom of chart (leaving the radius to 100%):

options: {
  layout: {
    padding: {
      bottom(ctx) {
        const chart = ctx.chart;
        let pb = 0;
        chart.data.datasets.forEach(function(el) {
          const hOffset = el.hoverOffset || 0;
          pb = Math.max(hOffset / 2 + 5, pb)
        });
        return pb;
      }
    }
  },
}

Supposed to get the hover offset here: https://github.com/chartjs/Chart.js/blob/59a2d5317835f6e054df095795dc0d6b7419e8cb/src/controllers/controller.doughnut.js#L272-L273

But resolveDataElementOptions only returns the offset or hoverOffset. Can't return both

I think you can replace the getMaxOffset method: https://github.com/chartjs/Chart.js/blob/59a2d5317835f6e054df095795dc0d6b7419e8cb/src/controllers/controller.doughnut.js#L122 with:

      const maxOffset = Math.max(this.options.offset || 0, this.options.hoverOffset || 0);
      const spacing = this.getMaxBorderWidth() + maxOffset + this.options.spacing;

https://stackblitz.com/edit/web-platform-koalr3?file=js%2Fdata.js,js%2Fchart.js