Formatting dataLabels in Highcharts - javascript

I am trying to use html tags like <table> and <tr> for the dataLabels, but it seems I'm not able to use these tags and only the basic tags (<b>, <strong>, <i>, <em>, <br/>, <span>). I was able to format the tooltip data with other html tags by setting the 'useHTML' tag to true. Is there a way to do the same for the dataLabels? This is what the two look like, the tooltip is on bottom.

You can format dataLabels with useHTML also. I don't know how readable your chart will be with all that extra data showing at all times, but you can put a table in the dataLabels.
http://jsfiddle.net/crLcxvLr/1
plotOptions: {
series: {
dataLabels: {
formatter: function() {
return "<table><tr><td>HEADER LEFT</td><td class='right'>Header Right</td></tr><tr><td>" + this.x + "</td><td class='right'>" + this.y + "</td></tr>";
},
enabled: true,
useHTML: true,
}
}
},

Related

Use series data but display custom text on top of columns Highchart

I'm trying to use highchart, working with colums.
My series data are some hours.
For example, if my data is 23.75, it means 23:45 hours.
I would like to use my 23.75 data so that my colums are in the right place, but the little text on top of my column displays "23:45".
Is it possible ? I can't find the right option to do this.
Thanks in advance !
you can format data label values by formatter
dataLabels: {
enabled: true,
formatter: function () {
return this.y; // you can update datalabel values here
}
}
Found it !
stackLabels: {
enabled: true,
formatter: function() {
return this.total // custom text label here
}
}

Highcharts changing tooltip datetime with formatter

I have a graph that looks like the below. By default each tooltip value is in it's own tooltip "bubble", with the datetime at the bottom of the Y axis (hovering on top of the X labels).
The problem is that changing the format of the datetime to match locale is not dynamic with Highcharts. I know I could have users change the dateTimeLabelFormats to match their locale, but I'm looking to leverage moment.js and their locale formatting built in.
I only need to change the datetime in these charts and nothing else.
When I try this code below, it gives me the locale leverage I'm looking for, but the tooltips are merged into 1 box and doesn't have that same feel as default.
tooltip: {
enabled: true,
dateTimeLabelFormats: {
//minute: '%e %b %H:%M',
hour: '%e %b %H:%M'
},
// For locale control with moment. Combined momentjs with this answer https://stackoverflow.com/a/33939715/1177153
formatter: function() {
var toolTipTxt = '<b>'+ moment.unix(this.x / 1000).format("LLL") +'</b>';
$.each(this.points, function(i, point) {
toolTipTxt += '<br/><span style="color:'+ point.series.color +'"> ' + point.series.name + ': ' + point.y+'</span>';
});
return toolTipTxt;
},
crosshairs: true,
shared: true
},
Is there a way to emulate default tooltip with the formatter? Individual "bubbles" for the values and the timestamp hovering at the bottom?
Is it possible to use xDateFormat with moment.js somehow?
I found a solution that works, right from the Highcharts API documentation for tooltip split.
The jsfiddle example from the API documentation had everything I needed (except moment.js).
I must have overlooked this 100 times today. Here's the final code that worked for me, and a screenshot of the result.
Now the tooltip's header will be in the right locale without the user changing any code.
tooltip: {
enabled: true,
// For locale control with moment.js - https://api.highcharts.com/highcharts/tooltip.split
formatter: function () {
// The first returned item is the header, subsequent items are the points
return [moment.unix( this.x / 1000).format("LLL")].concat(
this.points.map(function (point) {
return "<span style='color:" + point.series.color + "'>\u25CF</span> " + point.series.name + ': ' + point.y;
})
);
},
split: true,
},

xaxis label text words overlapping each other

How can i make the label text in the fiddle to be displayed the same way when exporting to image or pdf?
fiddlehttp://jsfiddle.net/hy5gx3v9/2/
You need to set the exporting: allowHTML: true if you would like to use HTML elements during exporting the chart.
exporting: {
allowHTML: true
}
The set the xAxis.labels.style.textOverflow equal to none.
After setting mentioned things, additionally you can delete the style attribute within returned string of the xAxis.labels.formatter:
labels: {
align: 'right',
useHTML: true,
formatter: function() { //use formatter
return '<span class="qTitle">' + this.value + '</span>';
},
style: {
textOverflow: 'none',
}
},
Live example: http://jsfiddle.net/song62xr/
API Reference: https://api.highcharts.com/highcharts/exporting.allowHTML
Kind regards!
To the best of my knowledge, you can't, however, the best way to do it would be making images and a pdf yourself, and then making buttons for it.
By the way, when I removed all the gibberish, it exported just fine.

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}

Categories

Resources