Alex Alex - 1 year ago 115
Javascript Question

Goal line in donut chart

I'm trying to modify Highchart's donut/pie chart to look something like this:
modified donut chart

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):

yAxis: {
title: {
text: "Hi there"
color: 'red',
dashStyle: 'dash',
value: 6,
width: 4,

Any ideas of how to do this for a pie chart?
Thanks in advance for any help!

Answer Source

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:


Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download