CODEWITHSUNDEEP
javascriptchartshighchartshighcharts-ng
Alex
Alex

Reputation: 107

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"
        },
        plotLines:[
          {
           color: 'red',
           dashStyle: 'dash',
           value: 6,
           width: 4,
          }
         ]
        },

http://jsfiddle.net/alexschoolzilla/cehL81ue/1/

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

Upvotes: 0

Views: 2308

Answers (1)

jlbriggs
jlbriggs

Reputation: 17791

As mentioned in my comment, I think this type of display is terribly inefficient and ineffective.

Plot lines do not appear to be supported with Pie Charts, for reasons that are relatively clear given the actual purpose and layout of a pie chart. 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:

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:

screenshot 1

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:

screenshot 2

FWIW

Upvotes: 3

Related Questions