vandanamishra
Posts: 6
Joined: Sun Oct 24, 2021 10:50 am

negative bars label issue on highchart

hii , i m working on negative bar graph i need to hide -ve sign coming on bars labels
1) I want to replace -ve sign with % sign
2) label is not visible on both the side (negative and positive ) when the value is exact 100
..please guide me to achieve this requirement

Thank you !!!
mateusz.b
Posts: 2006
Joined: Tue Jul 13, 2021 11:34 am

Re: negative bars label issue on highchart

Hello vandanamishra,

Thanks for contacting us with your question.

You should be able to do that with either dataLabels.format or dataLabels.formatter.
API reference: https://api.highcharts.com/highcharts/s ... .formatter,
https://api.highcharts.com/highcharts/s ... els.format

If you want me to show you how to do that please provide me with simplified demo of your chart. You can start here:
https://jsfiddle.net/BlackLabel/g96kt8jo/

Regards!
Mateusz Bernacik
Highcharts Developer
vandanamishra
Posts: 6
Joined: Sun Oct 24, 2021 10:50 am

Re: negative bars label issue on highchart

https://jsfiddle.net/a8vgfsuj/1/
this is code where i need to hide that -ve sign ...also inside of negative value i need to display percentage (for e.g inside of -9.9% i want to display 99 %)
please guide through this

Thank You!
mateusz.b
Posts: 2006
Joined: Tue Jul 13, 2021 11:34 am

Re: negative bars label issue on highchart

Hi vandanamishra,

You can use dataLabels.formatter to change labels like that.
Demo: https://jsfiddle.net/BlackLabel/tcv2rLdw/
API reference: https://api.highcharts.com/highcharts/s ... .formatter

Let me know if you have any further questions!
Regards!
Mateusz Bernacik
Highcharts Developer
vandanamishra
Posts: 6
Joined: Sun Oct 24, 2021 10:50 am

Re: negative bars label issue on highchart

thank you !!!

i actually wanted to implement that in this chart https://jsfiddle.net/nq7gkw8r/28/ .... could you place help me with this one m not able to add percent sign here also all the above issue
mateusz.b
Posts: 2006
Joined: Tue Jul 13, 2021 11:34 am

Re: negative bars label issue on highchart

vandanamishra,

Approach for this chart would be slightly different, you still use formatter function but this time it should be used on stacked labels instead of data labels.
Demo: https://jsfiddle.net/BlackLabel/azjcd24x/

Let me know if that was what you were looking for!
Regards!
Mateusz Bernacik
Highcharts Developer
vandanamishra
Posts: 6
Joined: Sun Oct 24, 2021 10:50 am

Re: negative bars label issue on highchart

hii ,thanks for above solution

one more issue i m facing is that 0% and 100 % is not visible on negative side .... could you please help in this also

Thanks
mateusz.b
Posts: 2006
Joined: Tue Jul 13, 2021 11:34 am

Re: negative bars label issue on highchart

Hello vandanamishra,

Some stack labels are not visible because of two reasons:
- first one is a bug which is reported here: https://github.com/highcharts/highcharts/issues/16764
I have already implemented workaround in the demo that you can find below.

- second reasons is that stack labels are being hidden when there are not enough space to show them - allowOverlap option should help.
Demo: https://jsfiddle.net/BlackLabel/e67bd1z9/
API reference: https://api.highcharts.com/highcharts/y ... lowOverlap

When it comes to 0, it is neither negative nor positive and because of that the label is positioned on the right side.

Let me know if you have any further questions!
Regards!
Mateusz Bernacik
Highcharts Developer
vandanamishra
Posts: 6
Joined: Sun Oct 24, 2021 10:50 am

Re: negative bars label issue on highchart

Thank You it did help

0 label is done .... but the problem with 100% is ..it overlaps the bar
i dont want it to overlap it should be visible after the bar is completed not over the bar
could you please help in this

Thanks
mateusz.b
Posts: 2006
Joined: Tue Jul 13, 2021 11:34 am

Re: negative bars label issue on highchart

Hi vandanamishra,

Could you provide me with a screenshot of that issue? In the demo data labels don't seem to overlap. Also their values are from 0-10% range so I'm not quite sure with which label do you have a problem.

Regards!
Mateusz Bernacik
Highcharts Developer

Return to “Highcharts Usage”