Develop Reference

Removing/Hiding Null label from x-axis of Chart

I'm looking to hide the null label from my chart here. I'm working in Actuate/Opentext designer. I originally needed for there to always be 28 column slots but there isn't always data points for each of those days. If there isn't- the label on the x-axis is showing up as null. I'd like to hide this label but can't figure out how. Even changing the color of it to white but I can't get around how to manipulate this label to never show when null. Here is an image of what I'm trying to remove from my chart and the current code
beforeGeneration: function(options) { options.xAxis.max = 27
//You can change options here.
options.plotOptions = {
series: {
pointWidth: 25, //size of column
pointPadding: 0.25, //size of padding between each bar
groupPadding: 0 //padding between each value groups in x axis
}
};
},

Use formatter function:
xAxis: {
...,
labels: {
formatter: function(){
return this.value || '';
}
}
}
API Reference: https://api.highcharts.com/highcharts/xAxis.labels.formatter

Response highcharts datalabels on series

I have been working with http://api.highcharts.com/highcharts/plotOptions.series.dataLabels
And my current set up for labels looks like this:
plotOptions = {
column: {
stacking: 'normal',
dataLabels: {
enabled: true,
formatter() {
if(this.y != 0) {
return formatValue(this.y, prefix, suffix);
}
}
}
}
};
But the problem I have is that if my column chart has let's say 30 columns, all of the labels run into each other. I see that I can set the allowOverlap param to false and so then they would not overlap....but then it looks messy with data labels all over the chart to prevent overlap. Is there a way to configure my highcharts to just hide all datalabels if there are too many labels (too many overlaps to handle)?
I've taken a look at Removing Highchart datalabels on windows resize but ideally would like to see if highcharts handles this.

Highcharts: Format all numbers with comma?

I'm using Highcharts and I want to format all numbers showed anywhere in the chart (tooltips, axis labels...) with comma-separated thousands.
Otherwise, the default tooltips and labels are great, and i want to keep them exactly the same.
For example, in this chart, the number should be 2,581,326.31 but otherwise exactly the same.
How can I do this?
I tried adding:
tooltip: {
pointFormat: "{point.y:,.0f}"
}
But this got rid of the nice circle and series label in the tooltip - I'd like to keep that. And ideally I'd prefer to use a single option to set global number formatting, across the whole chart.

This can be set with the thousandSep (API) global option.
Highcharts.setOptions({
lang: {
thousandsSep: ','
}
});
See this JSFiddle example.

This way worked with me.
I configured in yAxis option.
yAxis: {
labels: {
formatter: function() {
return Highcharts.numberFormat(this.value, 2);
}
}
}

In case you want to show numbers without commas and spaces.
eg. by default 9800 shows as 9 800.
If you want 9800 to be shown as 9800
you can try this in tooltip:
tooltip: {
pointFormat: '<span>{point.y:.f}</span>'
}

This way work for me.
I use Angular 10 and I did this for Tooltip and yAxis.
for yAxis use numberFormat:
labels: {
format: '{value}',
style: {
color: Highcharts.getOptions().colors[0]
},
formatter: function() {
return Highcharts.numberFormat(this.value, 3);
}
},
and for Tooltip :
{point.y:.f}

Highcharts markers on line only where there are labels

I have successfully labeled a time series for a subset of the points (where the time is either 3am or 3pm), but now to make the chart look cleaner I would like to only have the markers show up at the points where there are labels. Anyone out there know how to accomplish this? I am trying to add a graphic.destroy command in the label but I can't seem to get it to work.
js fiddle: http://jsfiddle.net/abbike18/z2k8h/1/
dataLabels: {
enabled: true,
y: -10,
formatter: function() {
if(Highcharts.dateFormat('%l',this.x) == '3')
{return Highcharts.numberFormat(this.y, 0, '.');}
//else{data.graphic.destroy();}
}
}

You can use this.point.destroy() function
http://jsfiddle.net/z2k8h/2/

Highcharts conditional data labels

I'm creating a Highcharts line chart based upon some user input. The user can select 1 or more groupings and a date range and I create a series for each group. This works fine except for that when they select over 3 groups, the chart looks terrible because there are way too many data labels.
I'd like to conditionally enable data labels only when where are less than 4 series on a chart. How can I do that? I'm trying like this but I can't seem to get it to work.
plotOptions: {
line: {
dataLabels: {
enabled: function() {
return !!(chart.series.length > 3);
},
color: '#000000',
formatter: function() {
return Highcharts.numberFormat(this.y, 2);
}
}
}
}

When you create the series, keep track of how many you create. Also have a javascript variable 'showDataLabels=true'. If the number of series goes above 4 when you are creating them, set showDataLabels=false;
var showDataLabels = true;
// start creating the series.
If num series > 4
showDataLabels = false;
Once you are ready to generate the chart, use:
plotOptions: {
line: {
dataLabels: {
enabled:showDataLabels,
color: '#000000',
formatter: function() {
return Highcharts.numberFormat(this.y, 2);
}
}
}
},

Use Formatter fucntion in dataLables
formatter: function () {
if(this.y!=0)
return this.y;
else`enter code here`
return "";
}