Donut Chart Title


Hi community, I'm creating a donut pie chart but I have a problem with the title.I want it to be on the middle of it and can't achieve that.

This is the code that I courrently have for the AdvancedFormat.

This is the current output.

I went to to see how they do it and I think I should got it.

I also went to but the center is filled so that solution wouldn't be perfect for me.

Hi Miguel,

Something like this would help you? 


Samuel M. wrote:

Hi Miguel,

Something like this would help you? 


Hi Samuel.

Yes, that is exactly what I want.

Can you share how you made it?   

Best regards,



Thanks to Samuel M.'s response, I was inspired to look over the code again and got the answer.

So here I post my version of it.


This is the preparation. The query returns 3 values so it has something to show on the chart.

Then, the assign only creates the inner circle because it's refered to the series / data.

A list append is used because the "AdvancedFormat_Init" requires a list input on the DataSeriesFormat.

The HighchartsJSON has the code that applies to the whole plot, in this case, the title.

On the Web Screen a piechart was inserted and the labels and values were selected from the advanced query. Then, the AdvancedFormat_Init is aplied to this chart.

Here you can see the variables used to achieve this result.

Final result

And here is the final result. The thickness of the chart is given by the innerSize value, the bigger the percentage, the thiner it will get.

The title is centered due to the "y: -10" that moves it a bit upper.

I hope this can help future developers that have the same problem that I had.


Hi Miguel,

I'm sorry for the late reply. I'm very glad that you found the solution.
My solution is pretty the same, changing the value of y: but with JS. I think that your solution is a little better.