Highcharts donut chart customization
-
29-06-2021 - |
문제
I have a license for highcharts and I would like to create a char like the one bellow:
The most similar component on highcharts is the following one:
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.
API http://api.highcharts.com/highcharts#chart
Thanks
해결책
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.
다른 팁
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/
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();
}