chartjs border inside doughnut

[AnaLRamirez]

Documentation Is:

• [X] Missing or needed?
• [X] Confusing
• [X] Not sure?

Please Explain in Detail...

Hello, i Just started using this librarte, I am using a donut type graph, but i am a bit Lost, I need that when placing they cursor on the segmento, a border si places below this spaced segmento as you can see un the image. I would appreciate if You could help me

Your Proposal for Changes

I hace tried settinf the border as follows

hoverBorderWidth:{ top:0, left:0, right:0, bottom:2 }

But reviewing the documentation a little this si incorrect

Example

No response

[LeeLenaleee]

Could use a custom plugin to achieve this, it will need some tweaking to get it exactly like you want it with sizing but its a basic start:

const options = {
  type: 'doughnut',
  data: {
    labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
    datasets: [{
      label: '# of Votes',
      data: [12, 19, 3, 5, 2, 3],
      backgroundColor: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
      hoverOffset: 50
    }]
  },
  options: {},
  plugins: [{
    beforeDraw: (chart, args, opts) => {
      const {
        ctx
      } = chart;
      const arcs = chart.getDatasetMeta(0).data;
      const width = opts.width || 20;
      const color = opts.color || 'pink'


      ctx.lineWidth = width;
      ctx.strokeStyle = color;

      arcs.forEach(a => {
        ctx.beginPath();
        ctx.arc(a.x, a.y, a.innerRadius + width / 2, a.startAngle, a.endAngle);
        ctx.stroke()
      })
    }
  }]
}

const ctx = document.getElementById('chartJSContainer').getContext('2d');
new Chart(ctx, options);

https://jsfiddle.net/jk2gLnw0/2/