Highcharts donut chart customization

Question

I have a license for highcharts and I would like to create a char like the one bellow:

enter image description here

The most similar component on highcharts is the following one:

enter image description here

Does someone know is is posible to replace the PIE inside for just a percent? or some other good client side javascript librarie to do it?

You can find a demo and the API in the following links.

DEMO http://jsfiddle.net/gh/get/jquery/1.7.2/highslide-software/highcharts.com/tree/master/samples/highcharts/demo/pie-donut/

API http://api.highcharts.com/highcharts#chart

Thanks

score 24 · Accepted Answer · answered Aug 31 '12 at 17:21

24

Check about innerSize.

"The size of the inner diameter for the pie. A size greater than 0 renders a donut chart. Can be a percentage or pixel value. Percentages are relative to the size of the plot area. Pixel values are given as integers. Defaults to 0." reference

Than you can take a look this example which shows how to put the text inside the donut chart.

Hope it help you.

answered Aug 31 '12 at 17:21

Ricardo Alvaro Lohmann

26,031
7
82
82

8

Check out this example here: http://jsfiddle.net/wergeld/e2qpa/47/. This is using the example you listed. So many possibilities with this. The only "flaw" I see is in aligning the background gray circle and text. Seems the center is not really where you think it should be when looking at the final donut chart. – wergeld Aug 31 '12 at 18:49

score 3 · Answer 2 · answered Sep 16 '15 at 07:26

You might try using title as an alternative and rather simple approach.

            title: {
                text: 'Budget',
                align: 'center',
                verticalAlign: 'middle',
                style: {
                    fontSize: '9.5px'
                } 
            },

JsFiddle: http://jsfiddle.net/amigoo/zwod86e1/

score 0 · Answer 3 · answered Jan 02 '14 at 13:01

 function(chart4) {
chart4.renderer.text('<span style="word-wrap: break-word !important;">Reduced by <br/>10 Years</span>', (chart4.chartWidth/2)-38, (chart4.chartHeight/2)-5)
             .css({

                color: '#4b4b4b',
                fontWeight: 'bold',
                fontSize: '12px'

            })
            .add();
}

Highcharts donut chart customization

3 Answers3

Linked