davidchuco
Posts: 6
Joined: Wed Dec 05, 2018 9:48 am

Solid gauge labels

Hi,

i've a little problem... i need put the serie's value next to the finish line.

Sample: https://jsfiddle.net/xwj97562/3/

Image: https://ibb.co/YXjBWdW

Any suggestion?

Thanks!
bastss
Site Admin
Posts: 1192
Joined: Wed Oct 17, 2018 10:59 am

Re: Solid gauge labels

Hello davidchuco,

I've generated this values at the ends of each line as yAxis.labels API: https://api.highcharts.com/highcharts/yAxis.labels. It was easy to set first and second label, but the position of the last one has to be changed by use events.render function API: https://api.highcharts.com/highcharts/c ... nts.render. Check this example: https://jsfiddle.net/Bastss/0g3qzmtb/

Kind regards!
Sebastian Wędzel,
Highcharts Developer
davidchuco
Posts: 6
Joined: Wed Dec 05, 2018 9:48 am

Re: Solid gauge labels

Thanks!

I think it's a possible solution, but if i have 6 lines (for example), they don't alignment all labels.

Sample: https://jsfiddle.net/9cpmyf42/

I try a lot of solutions... but nothing :(

any suggestion?
bastss
Site Admin
Posts: 1192
Joined: Wed Oct 17, 2018 10:59 am

Re: Solid gauge labels

davidchuco,

Could you explain what you want to achieve in your example?
Sebastian Wędzel,
Highcharts Developer
davidchuco
Posts: 6
Joined: Wed Dec 05, 2018 9:48 am

Re: Solid gauge labels

Hi!

Yes, of course. I try to draw something similar like this: https://ibb.co/YXjBWdW

Imagine you have 7 series and a gauge solid with half radio. ( Like an image)

I want to draw percentage value where the line is finished. The problem on the first solution is the value position. You can try with the following values: 20,40,70,90,100. The value position is not alignment.

Thank you so much!
rafalS
Posts: 2665
Joined: Thu Jun 14, 2018 11:40 am

Re: Solid gauge labels

Hi, davidchuco!

Here you have some code that will calculate labels' positions, render them properly always in the place where a point ends and rotate them. It will work properly until you have every single point in a separate series.

Let me know if you have any additional questions.

jsFiddle: https://jsfiddle.net/BlackLabel/ho65fwm9/

Best regards!
Rafal Sebestjanski,
Highcharts Team Lead
davidchuco
Posts: 6
Joined: Wed Dec 05, 2018 9:48 am

Re: Solid gauge labels

wow... it's really amazing!

I tried it 3 days ago, but never had good results.

Thank you so much! :D
rafalS
Posts: 2665
Joined: Thu Jun 14, 2018 11:40 am

Re: Solid gauge labels

You're welcome! ;)
Rafal Sebestjanski,
Highcharts Team Lead

Return to “Highcharts Usage”