I am looking for a sample of Javascript code to visualise pictures in a tooltip of a pie chart from Highcharts.
I would like to see different pictures according to the sectors I am navigating on...
Could you please help me?
Thanks in advance
You could enable HTML in the tooltip, and set the HTML content with a tooltip formatter.
tooltip: {
useHTML: true,
formatter: function() {
return '<img src="/your/image/path/' + this.series.name + '.png" />' + '<b>' + this.point.y + '</b>';
}
}
In this case, the image being loaded is based on on each series name. If your series were named Apples, Oranges, and Bananas, you just need to make apples.png, oranges.png, and bananas.png and set the path in that img tag appropriately.
Related
I am using the latest version (9.3.2) of Highcharts as for now.
And I would like to know whether it is possible to make the text color of the two labels the same as the related pie has.
I didn't set any color in the settings and I believe it's a default color value created by highcharts itself.
You can use dataLabels.formatter function and define color for the data label as the same as for the point.
series: [{
...,
dataLabels: {
formatter: function() {
const point = this.point;
return '<span style="color: ' + point.color + '">' +
point.name + ': ' + point.y + '%</span>';
}
}
}]
Live demo: http://jsfiddle.net/BlackLabel/qnjevg7c/
API Reference: https://api.highcharts.com/highcharts/series.pie.dataLabels.formatter
I was using highcharts for representing a log data, due to small space I have truncated the legends, but on mouse hovering over legends I need a tooltip to show the detailed legend value.
I believe you can use labelFormatter of legend and use it to return some HTML content with title attribute which will have full name of the series. Checkout this fiddle for the same.
legend: {
useHTML: true,
labelFormatter: function () {
return '<span title="'+ this.name +'">' + this.name + '</span>' + ' (click to hide)';
}
},
Plese upvote if this works for you.
I am using Highstock chart with range selector and as well as data grouping it is working fine, but facing issue with custom tooltips in highstock chart(I am able to generate custom tooltip in highchart, but this is not wotking in highstock). Please, anyone, help me with this.
You can create a custom tooltip in Highstock in the same way as in Highcharts:
tooltip: {
formatter: function() {
return 'Custom tooltip: x: ' + this.x + ' y: ' + this.y;
}
}
Live demo: https://jsfiddle.net/BlackLabel/q7undao5/1/
API Refernce: https://api.highcharts.com/highstock/tooltip.formatter
I have an issue where I have nested array data set consisting of [x,y] coordinates for a spline or scatter chart in rails LazyHighCharts, and the y coordinate is the date, in milliseconds, such as 1776600000000.
Is there such a thing as yDateFormat for tooltip ?
It seems logical there would be, since there is a:
tooltip: {
xDateFormat: '%Y-%m'
}
The whole idea is that when I mouse over a data point on a spline or scatter chart(I'm trying either option), the date will popup. But right now the date is popping up in a huge ms number, 1776600000000. I am not getting a fix to day.
Additionally, perhaps it would be nice to also include a pointFormat for something like:
tooltip: {
pointFromat: "Yada yada {point.y} and yadayda {point.x}"
xDateFormat: '%Y-%m'
}
Also for my y-axis settings, I have:
`chart.yAxis(title: { text: 'Yadayada'}, type: 'datetime' )
Any help appreciated. Pretty new to highcharts, and relatively newer to Rails
From Highcharts site you can use the formatter callback to return wanted date format.
Demo: https://jsfiddle.net/BlackLabel/4pf1xw02/
tooltip: {
formatter: function() {
return '<b>' + this.series.name + '</b><br/>' +
Highcharts.dateFormat('%e - %b - %Y',
new Date(this.y)) +
' date';
}
},
API: https://api.highcharts.com/highcharts/tooltip.formatter
I have 3 datasets within my series (low, normal, high) displaying on a scatter plot.
How can I force the tooltip and markers to be enabled only for the normal data set?
Many thanks
formatter: Function
Callback function to format the text of the tooltip. Return false to disable tooltip for a specific point on series.
Reference:
http://api.highcharts.com/highcharts#tooltip.formatter
See shared tooltip formatter. It gives you better control over the tooltip.
http://api.highcharts.com/highcharts#tooltip
EDIT: I have added some code. See the custom tooltip formatter;
tooltip: {
formatter: function () {
if (this.series.name == "Male") {
return "<b>" + this.series.name + "</b><br>" + this.x + " cm, " + this.y + " kg";
} else return " ";
}
}
See the fiddle for example: http://jsfiddle.net/androdify/cweC6/
This solution is for keeping tooltips on all series, but only display one tooltip at a time corresponding to the point actually hovered over.
Look through the code for where it is specifying a variable by the name of hoverPoints and change it to this:
{hoverPoint:l,hoverSeries:b,hoverPoints:l?[l]:[]}
This is the code for Highstock, so if you are using vanilla Highcharts you may need to change variable names around a bit. To explain how this works, the default value for hoverpoints is an array of all points on that spot on the x axis. Changing it to an array containing the single point that you actually hovered over, the value of hoverPoint, causes highcharts to ignore the other hit points.