CODEWITHSUNDEEP
javascripthighchartsdonut-chart
D P Venkatesh
D P Venkatesh

Reputation: 559

(how) can we create semi circle donut chart, with range labels?

enter image description here

I want to create this kind of semi circle donut chart. 

"series": [
    {
        "name": "xxx",
        "y": 4,
        "start": "50%",
        "end": "40%"
    },
    {
        "name": "yyy",
        "y": 10,
        "start": "40%",
        "end": "10%"
    },
    {
        "name": "zzz",
        "y": 9,
        "start": "10%",
        "end": "-15%"
    }
]

START and END points dataLables also has to be displayed in the chart like it is in image. Is it possible?

http://jsfiddle.net/hrvp3gj9/

Upvotes: 2

Views: 3397

Answers (1)

Stalfos
Stalfos

Reputation: 1520

Here is a solution that uses ZingChart. This uses a combination of two chart, a pie chart and a gauge chart.

The half donut is created with the scale-r > aperture attribute set to 180 (which makes a half circle) and the plot > slice attribute set to 80 (which makes the hole of the donut).

The gauge chart, which is placed directly over the pie chart, has most of its attributes hidden. However, by setting the same aperture and slice values, we can more easily place labels around the chart. Take note of the scale-r > item > rules array that is used to make only certain items visible through the use of the alpha (transparency) attribute, which is set to 0 in the scale-r > item object.

I'm on the ZingChart team, please let me know if you have any questions :)

Upvotes: 3

Related Questions