jakeoh
Posts: 40
Joined: Tue May 01, 2012 3:18 pm

Displaying datalabel for null values in column and bar charts

Hi,

I am trying to display datalabels (ex: 'N/A') for null values in bar and column charts, but it does not seem to be possible. The API has a reference to nullFormat and nullFormatter for datalabels, but it does not seem to be possible. Old workarounds found on Google do not seem to work anymore neither.

Here's my non-working example:

https://jsfiddle.net/jmunger/9eohz78j/2/

Any idea how to achieve this?
kamil.m
Posts: 892
Joined: Thu May 19, 2022 1:33 pm

Re: Displaying datalabel for null values in column and bar charts

Hi there,

Thank you for contacting us!

The API description of those features might be confusing, I'll fix that, but in the meantime let me explain:

The nullFormat and nullFormatter properties are available only on series that support displaying the null points. So for example, such a series would be a heat map. Even, when the points have a null value, the empty tile is still displayed on a chart.

But, when you use a column, line, scatter, etc. series - points with null values simply do not exist.

So as a workaround, how about using this solution: http://jsfiddle.net/xnxpwt67/1/
offered in a StackOverflow thread: https://stackoverflow.com/questions/423 ... highcharts

Or maybe mapping the nulls to 0?

Let me know how that went!
Best regards
Kamil Musiałowski
Highcharts Developer
jakeoh
Posts: 40
Joined: Tue May 01, 2012 3:18 pm

Re: Displaying datalabel for null values in column and bar charts

While the solution above works well for this specific column chart, I need a more flexible solution that would work for bar charts, line charts, and other types. Mapping to zero might be a better solution, but I also want to distinguish possible 0 values from null values. Is there a function that would allow me to do that?
kamil.m
Posts: 892
Joined: Thu May 19, 2022 1:33 pm

Re: Displaying datalabel for null values in column and bar charts

Due to the fact that the null bars, columns etc. are not displayed on the chart I think that going with the mapping route would be a better way of doing that. (To remain all of the API styling possibilities etc.)

Could you tell me more about your requirements for the distinction between true null values and 0 values? If you would share some of the details, maybe we will come up with a perfect solution for it together. Maybe create a small demo, with both values so that we can work on it?

Waiting for your answer!
Kamil Musiałowski
Highcharts Developer
jakeoh
Posts: 40
Joined: Tue May 01, 2012 3:18 pm

Re: Displaying datalabel for null values in column and bar charts

It would take too long to get a jsFiddle up, since I am parsing CSV and adding points dynamically, but what I did is add a property to the point when parsing; my CSV contains "." instead of a numeric value when the value should not be displayed. When I encounter this, I translate the y value to 0, and set the "np" property to true:

Code: Select all

y: isNaN(csvdata[i][value]) ? 0 : parseFloat(csvdata[i][value]),
np: isNaN(csvdata[i][value]),
note: csvdata[i]['note'] ? csvdata[i]['note'] : ""
Then, I can use the formatter for datalabels and the tooltip to display a custom label and tooltip when the value should not be presented.

Code: Select all

dataLabels: {
	enabled: true,
	formatter: function(){
		if(this.point.y === 0 && this.point.np){
			return "<span>" + this.point.note + "</span>";
		}
		else{
			return "<span>" + Highcharts.numberFormat(this.point.y, 1) + this.point.note + "</span>";
		}
	} 
}
Thanks for the help!
kamil.m
Posts: 892
Joined: Thu May 19, 2022 1:33 pm

Re: Displaying datalabel for null values in column and bar charts

That was a great idea! Adding custom properties is really helpful when dealing with such problems.

Do not hesitate to contact us with any further questions,
Best regards!
Kamil Musiałowski
Highcharts Developer

Return to “Highcharts Usage”