Highcharts: plot a number that was too small to detect? - highcharts

Question

I am plotting values on a Highchart for my client. Sometimes she tests for something and the resulting number is too small to be detected (so she doesn't give me a number value). She doesn't want the chart to show a zero, but rather a "non-detect." Does anyone have ideas how to show that?
For example, how do I plot something like "if <.5 then display '<0.5' instead of a number"?
Here are the tables that I am converting into Highcharts (specifically the Microcystin test). The Highcharts are powered by parsing .csv files with PHP. If a value says "<0.5", then I don't want it to be a zero. I want people to know that the test was run, but that the level was too low to register. For now, I'm telling my client to explain that using introductory text, but thought maybe one of you would have a better idea for communicating this.
Note: I can see that she reported a .29 (which is smaller than .5). That looks inconsistent with what I'm asking. Apparently that was tested with a more sensitive test (so it is a valid plot).
Example series:
0.2,
0.66,
23.3,
1.64,
0.29,
<0.5,
0.58,
464,
93.2,
22.9

Answer 1

You can convert such values into very small numbers and show them as data labels and in a tooltip as a <0.5 value.
var data = [0.2, 0.66, 23.3, 1.64, 0.29, '<0.5', 0.58, 464, 93.2, 22.9];
data = data.map(el => isNaN(el) ? 0.0001 : el);
Highcharts.chart('container', {
series: [{
data: data,
dataLabels: {
enabled: true,
formatter: function() {
if (this.y < 0.5) {
return '< 0.5'
}
return this.y;
}
}
}],
tooltip: {
pointFormatter: function() {
var pointVal = this.y < 0.5 ? '< 0.5' : this.y;
return '<span style="color:' + this.color + '">●</span> ' + this.series.name + ': <b>' + pointVal + '</b><br/>'
}
}
});
Live example: http://jsfiddle.net/BlackLabel/0q864fx2/
API Reference:
https://api.highcharts.com/highcharts/series.line.dataLabels.formatter
https://api.highcharts.com/highcharts/tooltip.formatter