Search code examples
javascriptmathchart.jsdonut-chart

How to get specific co-ordinate along Chartjs donut arc

I need to find the specific x and y coordinates of each arc. Below is a photo illustrating exactly which coordinates I require, color-coded according to each arc. I need those two points of x and y coordinates for every arc element.

enter image description here

Here is a sample arc object(from my own project):

enter image description here

Below is some sample code for this:

const data = {
        labels: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
        datasets: [{
          label: 'Weekly Sales',
          data: [18, 12, 6, 9, 12, 3, 9],
          backgroundColor: [
            'rgba(255, 26, 104, 0.2)',
            'rgba(54, 162, 235, 0.2)',
            'rgba(255, 206, 86, 0.2)',
            'rgba(75, 192, 192, 0.2)',
            'rgba(153, 102, 255, 0.2)',
            'rgba(255, 159, 64, 0.2)',
            'rgba(0, 0, 0, 0.2)'
          ],
          borderColor: [
            'rgba(255, 26, 104, 1)',
            'rgba(54, 162, 235, 1)',
            'rgba(255, 206, 86, 1)',
            'rgba(75, 192, 192, 1)',
            'rgba(153, 102, 255, 1)',
            'rgba(255, 159, 64, 1)',
            'rgba(0, 0, 0, 1)'
          ],
          borderWidth: 1,
          cutout: '70%'
        }]
      };

      const donutArc = {
        id: 'donutArc',
        afterDraw: (chart) => {
          const { ctx, data: { datasets }, } = chart;
          
          datasets.forEach((dataset, i) =>{
            chart.getDatasetMeta(i).data.forEach((arc, j) => {
                console.log(arc)
            })
          })

        }
      }

      // config 
      const config = {
        type: 'doughnut',
        data,
        options: {
          plugins: {
            legend: {
              display: false
            }
          }
        },
        plugins: [donutArc]
      };

      // render init block
      const myChart = new Chart(
        document.getElementById('myChart'),
        config
      );

Full code can be found here: https://jsfiddle.net/tpLrxb53/.

I'm pretty sure this involves dealing with the startAngle and endAngle, but I am unable to make sense of them in the documentation here: https://www.chartjs.org/docs/latest/api/classes/ArcElement.html

Any explanation/solutions will be highly appreciated

Solution

  • You can get points on a circle with the formula

    x = radius*sin(angle), y = radius*cos(angle)

    So I suppose in your code you could do something like

    const donutArc = {
    id: 'donutArc',
    afterDraw: (chart) => {
    const { ctx, data: { datasets }, } = chart;     
    datasets.forEach((dataset, i) =>{
        chart.getDatasetMeta(i).data.forEach((arc, j) => {
            r1 = arc.innerRadius
            r2 = arc.outerRadius
            xinner = r1*Math.sin(arc.startAngle)
            yinner = r1*Math.cos(arc.startAngle)
            xouter = r2*Math.sin(arc.startAngle)
            youter = r2*Math.cos(arc.startAngle)
            // then I guess here you would draw something
            })
        })
    }
}

    This is assuming the origin of the graph is (0,0) and thatstartAngle, outerRadius and innerRadius are what they would appear to be