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
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
}
}
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,
},
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.
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.
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}