tyahav
Posts: 15
Joined: Thu Jul 01, 2021 7:37 am

Custom column bar with negative values

Sun Apr 17, 2022 12:35 pm

Hello,

I'm trying to configure the graph configuration like the following design but without success.
I have the following graph configuration: https://jsfiddle.net/tyahav/mkvxr95a/
I am trying to do the following:
1. Change the color of the line to Blue.
2. Set the name under the bar for positive values and on top of the bar for negative bars.
3. Align the value on top of positive values and on the bottom for negative bars.
4. Set different text colors according to the length of the bar.

Thank you
Attachments
Screen Shot 2022-04-17 at 15.13.15.png
Screen Shot 2022-04-17 at 15.13.15.png (12.72 KiB) Viewed 353 times

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

Re: Custom column bar with negative values

Mon Apr 18, 2022 3:05 pm

Hi tyahav,

Thanks for contacting us with your questions.

1) Line like that can be created with a plotLine.
2, 3) For custom data labels settings you should use dataLabels.formatter and change labels' properties conditionally.
4) I'm not quite sure what exactly do you mean. If it refers to data labels then most likely it can be done with formatter too, but to tell for sure I need more precise explanation.
Demo: https://jsfiddle.net/BlackLabel/zu9xqo6j/

Let me know if it was what you were looking for and feel free to ask any further questions.
Regards!
Mateusz Bernacik
Highcharts Developer

tyahav
Posts: 15
Joined: Thu Jul 01, 2021 7:37 am

Re: Custom column bar with negative values

Mon Apr 18, 2022 6:28 pm

mateusz.b wrote:
Mon Apr 18, 2022 3:05 pm
Hi tyahav,

Thanks for contacting us with your questions.

1) Line like that can be created with a plotLine.
2, 3) For custom data labels settings you should use dataLabels.formatter and change labels' properties conditionally.
4) I'm not quite sure what exactly do you mean. If it refers to data labels then most likely it can be done with formatter too, but to tell for sure I need more precise explanation.
Demo: https://jsfiddle.net/BlackLabel/zu9xqo6j/

Let me know if it was what you were looking for and feel free to ask any further questions.
Regards!
Thank you for your help!
I've checked the attached JSfiddle and it looks great, I've got a few couples of questions:
1. About the label when I have values like -1 and -2, it looks like the label disappears - do you know why? from -3 it shows the name.
2. I've seen that on negative bars the value is inside, how can I make that also in the Positive bars the value will be inside?
3. Is there a way to remove the black stroke from the names/values? I want to use White color but it inserts automatically the black stroke.
Attachments
Screen Shot 2022-04-18 at 21.26.43.png
Screen Shot 2022-04-18 at 21.26.43.png (90.38 KiB) Viewed 334 times

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

Re: Custom column bar with negative values

Tue Apr 19, 2022 10:19 am

Hi tyahav,

1, 2) Some labels doesn't show because they overlap with each other and thus are hidden. You can force them to show by setting allowOverlap: true property. To avoid that problem I added y offset for positive values, but in effect, as you have noticed, labels are positioned outside of bars.
Demo: https://jsfiddle.net/BlackLabel/50vj9L7h/
To keep labels inside and avoid overlapping problem, most likely you will have to add another condition to the formatter and adjust labels' position for points with values close to 0.

3) That black stroke can be removed by setting textOutline: 'none' for data labels.
Demo:https://jsfiddle.net/BlackLabel/d8m1sh9n/

Let me know if you have any further questions.
Regards!
Mateusz Bernacik
Highcharts Developer

tyahav
Posts: 15
Joined: Thu Jul 01, 2021 7:37 am

Re: Custom column bar with negative values

Wed May 18, 2022 6:27 am

mateusz.b wrote: Hi tyahav,

1, 2) Some labels doesn't show because they overlap with each other and thus are hidden. You can force them to show by setting allowOverlap: true property. To avoid that problem I added y offset for positive values, but in effect, as you have noticed, labels are positioned outside of bars.
Demo: https://jsfiddle.net/BlackLabel/50vj9L7h/
To keep labels inside and avoid overlapping problem, most likely you will have to add another condition to the formatter and adjust labels' position for points with values close to 0.

3) That black stroke can be removed by setting textOutline: 'none' for data labels.
Demo:https://jsfiddle.net/BlackLabel/d8m1sh9n/

Let me know if you have any further questions.
Regards!

Thank you for your help! - sorry for the late reply.

I've noticed that while I am having only positive values, the label isn't getting below the bar - see attachment.
How can I set the labels below? - every assignment to the "label.y" isn't affected by the chart.
Attachments
Screen Shot 2022-05-18 at 9.25.46.png
Screen Shot 2022-05-18 at 9.25.46.png (57.58 KiB) Viewed 277 times

tyahav
Posts: 15
Joined: Thu Jul 01, 2021 7:37 am

Re: Custom column bar with negative values

Wed May 18, 2022 11:10 am

mateusz.b wrote:
Tue Apr 19, 2022 10:19 am
Hi tyahav,

1, 2) Some labels doesn't show because they overlap with each other and thus are hidden. You can force them to show by setting allowOverlap: true property. To avoid that problem I added y offset for positive values, but in effect, as you have noticed, labels are positioned outside of bars.
Demo: https://jsfiddle.net/BlackLabel/50vj9L7h/
To keep labels inside and avoid overlapping problem, most likely you will have to add another condition to the formatter and adjust labels' position for points with values close to 0.

3) That black stroke can be removed by setting textOutline: 'none' for data labels.
Demo:https://jsfiddle.net/BlackLabel/d8m1sh9n/

Let me know if you have any further questions.
Regards!
Please see my JSfiddle for the above message ->
https://jsfiddle.net/tyahav/puwyc7fg/3/
You should remove 'Amazon' object from the data to see that label is affected during this change.

Thank you for the help!

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

Re: Custom column bar with negative values

Fri May 20, 2022 2:12 pm

Hi tyahav,

Sorry for slightly longer response time.

It behaves like that, because without negative values there is not enough space below columns to offset those labels.

In this case you should use translate method to foce the labels to move under bars.
Demo:https://jsfiddle.net/BlackLabel/wmxbj3z8/
API reference:https://api.highcharts.com/class-refere ... #translate

Let me know if it was what you were looking for.
Regards!
Mateusz Bernacik
Highcharts Developer

tyahav
Posts: 15
Joined: Thu Jul 01, 2021 7:37 am

Re: Custom column bar with negative values

Sun May 22, 2022 7:07 am

mateusz.b wrote:
Fri May 20, 2022 2:12 pm
Hi tyahav,

Sorry for slightly longer response time.

It behaves like that, because without negative values there is not enough space below columns to offset those labels.

In this case you should use translate method to foce the labels to move under bars.
Demo:https://jsfiddle.net/BlackLabel/wmxbj3z8/
API reference:https://api.highcharts.com/class-refere ... #translate

Let me know if it was what you were looking for.
Regards!
Hi, Thank you for your response - it is working for positive values only but if I have for example only negative values I'm getting the following attachment.
How can I check for both negative/positive values only and display the appropriate chart style?
Attachments
Screen Shot 2022-05-22 at 10.06.59.png
Screen Shot 2022-05-22 at 10.06.59.png (37.46 KiB) Viewed 240 times

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

Re: Custom column bar with negative values

Mon May 23, 2022 6:16 am

Hi tyahav,

Please add another condition like in my previous answer to see if values are negative only, and then adjust labels' position:
Demo: https://jsfiddle.net/BlackLabel/usj9vhq1/

Let me know if you have any further questions!
Regards!
Mateusz Bernacik
Highcharts Developer

tyahav
Posts: 15
Joined: Thu Jul 01, 2021 7:37 am

Re: Custom column bar with negative values

Wed May 25, 2022 9:30 am

mateusz.b wrote:
Mon May 23, 2022 6:16 am
Hi tyahav,

Please add another condition like in my previous answer to see if values are negative only, and then adjust labels' position:
Demo: https://jsfiddle.net/BlackLabel/usj9vhq1/

Let me know if you have any further questions!
Regards!
Great, now it works. Thank you so much!!
How can I add space between positive and negative bars?

tyahav
Posts: 15
Joined: Thu Jul 01, 2021 7:37 am

Re: Custom column bar with negative values

Wed May 25, 2022 9:44 am

tyahav wrote:
Wed May 25, 2022 9:30 am
mateusz.b wrote:
Mon May 23, 2022 6:16 am
Hi tyahav,

Please add another condition like in my previous answer to see if values are negative only, and then adjust labels' position:
Demo: https://jsfiddle.net/BlackLabel/usj9vhq1/

Let me know if you have any further questions!
Regards!
Great, now it works. Thank you so much!!
How can I add space between positive and negative bars?
Like that:
Attachments
Screen Shot 2022-05-25 at 12.43.24.png
Screen Shot 2022-05-25 at 12.43.24.png (11.95 KiB) Viewed 194 times

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

Re: Custom column bar with negative values

Wed May 25, 2022 3:39 pm

Hi tyahav,

In that case you should use two separated x axes - one for positive values and another for negative values. The distance between the bars can be adjusted with axis.width and axis.left properties.
Demo: https://jsfiddle.net/BlackLabel/msyqo6hx/
API reference: https://api.highcharts.com/highcharts/xAxis.left,
https://api.highcharts.com/highcharts/xAxis.width

Let me know if it was what you were looking for.
Regards!
Mateusz Bernacik
Highcharts Developer

tyahav
Posts: 15
Joined: Thu Jul 01, 2021 7:37 am

Re: Custom column bar with negative values

Thu May 26, 2022 2:17 pm

mateusz.b wrote:
Wed May 25, 2022 3:39 pm
Hi tyahav,

In that case you should use two separated x axes - one for positive values and another for negative values. The distance between the bars can be adjusted with axis.width and axis.left properties.
Demo: https://jsfiddle.net/BlackLabel/msyqo6hx/
API reference: https://api.highcharts.com/highcharts/xAxis.left,
https://api.highcharts.com/highcharts/xAxis.width

Let me know if it was what you were looking for.
Regards!
Thank you for the help.
How we can make more space below columns for the labels? When I am trying to add more offset, the value cuts.

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

Re: Custom column bar with negative values

Thu May 26, 2022 2:51 pm

Hi tyahav,

Could you provide me with the demo where values are being cut? Thanks in advance.

Regards!
Mateusz Bernacik
Highcharts Developer

tyahav
Posts: 15
Joined: Thu Jul 01, 2021 7:37 am

Re: Custom column bar with negative values

Sun May 29, 2022 9:31 am

mateusz.b wrote:
Thu May 26, 2022 2:51 pm
Hi tyahav,

Could you provide me with the demo where values are being cut? Thanks in advance.

Regards!
Yes, see the following.
https://jsfiddle.net/tyahav/uqf2Lwa4/11/

Return to “Highcharts Usage”