0
votes

Using Highcharts, I'm trying to position rectangular elements above the "center-of-mass" of a pie chart slice.

I have the formula/algorithm for finding the center of the slice:

shapeArgs = Chart.series[0].points[sliceIndex].shapeArgs,
ang       = (shapeArgs.end - shapeArgs.start) / 2 + shapeArgs.start,
posX      = cX + shapeArgs.r/2 * Math.cos(ang),
posY      = cY + shapeArgs.r/2 * Math.sin(ang)

This finds the center of the slice based on the start & end angles, and the radius of the chart - represented by the black circle in the image below. What I'm wanting is some way to find the center of the biggest rectangle that'll fit in the slice - represented by the green circle below (which I just eye-balled). My reasoning is that an element positioned over the center-of-mass of the slice will fit better in the slice than something positioned at the exact center. [![enter image description here][1]][1]

My rudimentary fix has been to reduce the factor by which the radius is reduced:

posX = cX + shapeArgs.r/1.3 * Math.cos(ang)

Which seems to work fairly well, but I'm wondering if there's a better way. Does anyone know the math for this?

Edit:

Screenshot of the result of tweaking the factor: https://i.stack.imgur.com/FBH5p.png
Screenshot of the result of doing the Wikipedia math: https://i.stack.imgur.com/DlGcS.png

1
It looks like a rather complicated problem in general case. Maybe you can reduce slices to be triangles which the solution seems to be simpler (find rectangle inscribed in a triangle). Also, brute force solution (checking the rects for all points along the slice and find the best fit) might be fast enough. - morganfree

1 Answers

0
votes

According to Wikipedia, the distance of the center of mass of a circular sector from the center is (2r * sin(a)) / (3 * a). I would find the posX and posY like this:

var dist = (2 * shapeArgs.r * Math.sin(ang)) / (3 * ang);
posX = cX + dist * Math.cos(ang);
posY = cY + dist * Math.sin(ang);