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
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 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 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.
How do I get the Donut chart in Highcharts to auto calculate the precentages of the data I sent . For example my data can be data: [50.85, 7.35, 33.06, 2.81] and I want to know how can the charts calculate the inner pie chart (of the Donut chart) to show or render as percentages?
Use:
this.percentage
Example jsFiddle:
dataLabels: {
formatter: function() {
return '<b>'+ this.point.name +':</b> '+ this.percentage +'%';
}
}
Api:
http://api.highcharts.com/highcharts#plotOptions.series.dataLabels.formatter
http://api.highcharts.com/highcharts#tooltip.formatter