ctaneja
Posts: 22
Joined: Wed Aug 31, 2022 5:07 am

mixed placements of datalabels in bar chart based upon the width of the bar

Hi,
I would like to have mixed placements in data labels for a bar chart. If the width of the chart is too small for the label to fit in, I would like to display the label out of the bar otherwise inside of the bar. Please refer to this design https://i.postimg.cc/5NWSsgVG/Screensho ... 114946.png. Also, if the value is 0, I want to show the label and obviously outside the bar. The bar chart in design is reversed over y-axis and and the data values are [7, 2, 7, 0].
kamil.m
Posts: 892
Joined: Thu May 19, 2022 1:33 pm

Re: mixed placements of datalabels in bar chart based upon the width of the bar

Hi there,

What you need to achieve is basically a default Highcharts dataLabels behavior. Take a look at the demo, and tell me if this is something you wanted to achieve. You can use the provided demo to recreate and test your project. If you will encounter any issues, feel free to contact us and we will help you with the further implementation.


DEMO: https://jsfiddle.net/BlackLabel/yrphkwmj/
API Reference: https://api.highcharts.com/highcharts/p ... dataLabels

Best regards!
Kamil Musiałowski
Highcharts Developer
ctaneja
Posts: 22
Joined: Wed Aug 31, 2022 5:07 am

Re: mixed placements of datalabels in bar chart based upon the width of the bar

Yes, it worked. Seems like I was setting up some extra unnecessary attributes that were overriding this default behaviour. Anyways.
I have another requirement that if the label is placed outside of the bar, it should have a different color(say green) and if inside then it should have a different color(say white). I want to use white color as my font color for dataLabels. So if the label is placed outside it will match the background color and wont be visible. Refer to the design: https://i.postimg.cc/5NWSsgVG/Screensho ... 114946.png
kamil.m
Posts: 892
Joined: Thu May 19, 2022 1:33 pm

Re: mixed placements of datalabels in bar chart based upon the width of the bar

I'm glad that it's working now.

What you need can be achieved with a custom formatting for dataLabels. Take a look at the example below, where we check if the label fits inside the bar, and then conditionally set a custom color.

DEMO: https://jsfiddle.net/BlackLabel/xfk07t1a/
API Reference: https://api.highcharts.com/highcharts/s ... .formatter

Let me know if that's what you were looking for,
Regards!
Kamil Musiałowski
Highcharts Developer
ctaneja
Posts: 22
Joined: Wed Aug 31, 2022 5:07 am

Re: mixed placements of datalabels in bar chart based upon the width of the bar

Hi there,
I am using Angular as the framework for this and I don't think putting up this much HTML and styles inside my component.ts will be a good practice. is there a way I can use conditional styling using CSS and NgStyle or something similar. For example, if I could give different CSS classes for different colours and then fill those colors using CSS.
kamil.m
Posts: 892
Joined: Thu May 19, 2022 1:33 pm

Re: mixed placements of datalabels in bar chart based upon the width of the bar

Highcharts use inline injected HTML styles, therefore the class manipulation might not always work (without using the !important flag). In the example given above there is only one short line of HTML code, which is a standard Highcharts solution, because even if you don't specify a return for the formatter, the HTML will be created anyways.

In short, using the HTML line mentioned in the demo above is the most optimal and recommended solution for this case.

Regards!
Kamil Musiałowski
Highcharts Developer
ctaneja
Posts: 22
Joined: Wed Aug 31, 2022 5:07 am

Re: mixed placements of datalabels in bar chart based upon the width of the bar

Hi Kamil,
I see, this is the only and most optimal way to fulfill the requirement. I have a follow-up question. Can we manage styling (padding, colors, spacing, conditional styling) using CSS with HighCharts? I can see that HighCharts internally creates SVGs and shows them on screen using <svg> tag. Is there any way I can add my own CSS style classes to style the chart?
ctaneja
Posts: 22
Joined: Wed Aug 31, 2022 5:07 am

Re: mixed placements of datalabels in bar chart based upon the width of the bar

+
I have used a gradient to color this chart. But, I have created this gradient in the component.ts file in my angular code. Is there any way to use these gradients (or solid colors) to fill the bars or area charts using CSS? https://jsfiddle.net/oeg5vyfL/
kamil.m
Posts: 892
Joined: Thu May 19, 2022 1:33 pm

Re: mixed placements of datalabels in bar chart based upon the width of the bar

It is possible to use CSS with Highcharts, but not with every element - so it's a bit of a trial and error process. Also, I would highly recommend reading the styled mode article linked below. It will probably answer most of your questions regarding the CSS usage.

You can use the Highcharts styled mode, read more about it here: https://www.highcharts.com/docs/chart-d ... yle-by-css

Some properties have the style property (in which you can use CSS), for example, series.dataLabels.style.
https://api.highcharts.com/highcharts/s ... bels.style

Sometimes you'll have to use the !important flag in the CSS file.
But in general - it is possible to some extent.
Kamil Musiałowski
Highcharts Developer
kamil.m
Posts: 892
Joined: Thu May 19, 2022 1:33 pm

Re: mixed placements of datalabels in bar chart based upon the width of the bar

When it comes to gradients in CSS, I would recommend reading this article: https://www.highcharts.com/docs/chart-d ... d-patterns

And taking a look at the demo below: https://jsfiddle.net/BlackLabel/90hb7cwx/

If you will encounter any issues during the CSS implementation, feel free to contact us!
Kamil Musiałowski
Highcharts Developer
ctaneja
Posts: 22
Joined: Wed Aug 31, 2022 5:07 am

Re: mixed placements of datalabels in bar chart based upon the width of the bar

kamil.m wrote: Tue Sep 13, 2022 4:22 pm I'm glad that it's working now.

What you need can be achieved with a custom formatting for dataLabels. Take a look at the example below, where we check if the label fits inside the bar, and then conditionally set a custom color.

DEMO: https://jsfiddle.net/BlackLabel/xfk07t1a/
API Reference: https://api.highcharts.com/highcharts/s ... .formatter

Let me know if that's what you were looking for,
Regards!

Hi Kamil,
This is breaking if I am changing the data even a bit. https://jsfiddle.net/tg0cj4eo/ Also, you have compared

Code: Select all

this.y / max
with 0.05
in the formatter function. Can you please explain what is this magic number?
kamil.m
Posts: 892
Joined: Thu May 19, 2022 1:33 pm

Re: mixed placements of datalabels in bar chart based upon the width of the bar

Hi there,

In this line, we compare the bar length to the total available space for the bar (compare the current bar to 100% length bar), and if the bar is smaller than 5% of its maximum length, then we change the color.

I have set the inside property to false, so the green labels won't be rendered inside bars, and changed the percentage to 25% (0.25). Of course, this is just a simple ternary operator, and I would highly encourage you to create a more complicated if statement, to perfectly match your criteria.
DEMO: https://jsfiddle.net/BlackLabel/zt7s5kq0/

Best regards!
Kamil Musiałowski
Highcharts Developer

Return to “Highcharts Usage”