I'm trying to modify Highchart's donut/pie chart to look something like this:
I've modified a jsfiddle of their pie chart to look somewhat like it. But I'm running into problems creating that little "GOAL > 55%" tick mark and text. For other charts, like a stacked bar chart, I've been able to use a plotLine on the yAxis, but that isn't working here (which probably makes sense, because a pie chart doesn't really have a yAxis):
text: "Hi there"
As mentioned in my comment, I think this type of display is terribly inefficient and ineffective.
However, it is achievable with Highcharts, and I would use the solid gauge as a base, using their "Apple Activity Gauge" demo as a starting point, rather than the donut:
You can add a
plotLine to the
yAxis to achieve the target line, and you can adjust all of the other display settings to your needs. A quick, rough example:
That said, I feel obligated to include that I would much prefer to display this type of information as a bullet graph, or, a simplified version of just a bar graph with a target line.
An example using bar charts: