I have a small problem (i hope it is small) with highcharts.
My target is, to show the chosen min/max range from the navigation to the subtitle.
But I have no idea how to do this.
Here a sample picture
Any ideas?
You could use the chart.render event to achieve this in the following way:
chart: {
events: {
render: function(){
this.setSubtitle(
{text:
'<b>From:</b> ' +
(new Date(this.xAxis[0].getExtremes().userMin).toLocaleString()) +
' <b>To: </b>' +
(new Date(this.xAxis[0].getExtremes().userMax).toLocaleString())
}
)
}
}
},
This will give you a min/max when the chart is loaded, and when user selects their interval.
The timeformat can be changed of course, I used .toLocaleString() because it is easy.
Working example: http://jsfiddle.net/ewolden/37bp1qpc/
API reference: https://api.highcharts.com/highstock/chart.events.render
Related
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 need to integrate highcharts with table that contains related data. Each user's hover event should set particular background color to a table row. I don't know how can I get some information about hovered element in highcharts. I've created some demo to illustrate the problem here
plotOptions: {
spline: {
point:{
events:{
mouseOver: function(e) {
$('span').show().text('hover action').fadeOut();
}
}
}
}
}
As you can see I've manged to get noticed about each hover event but I still don't know which point on charts was hovered. How can I get this?
You can get access to the point's object in that event function via the this property.
To show the series name and the point index of the point you just hovered over you can do:
$('span').show().text(this.series.name + ': ' + this.index).fadeOut();
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.
Id like to let the user know that he can remove items from the legend by simply clicking on them. To some, this may be intuitive but others may not know that they can do that. I would like to let the users know when they over the legend item that then can click to remove it.
I am using the GWT-wrapper class for highcharts.
Thank you.
Highcharts doesn't have built-in tooltip for item legend, but still you can create your own tooltip for that. It's simple to add custom events to legendItem (mouseover and mouseout for example) and show that tooltip.
See example how to add events to elements in Highcharts: http://jsfiddle.net/rAsRP/129/
events: {
load: function () {
var chart = this,
legend = chart.legend;
for (var i = 0, len = legend.allItems.length; i < len; i++) {
(function(i) {
var item = legend.allItems[i].legendItem;
item.on('mouseover', function (e) {
//show custom tooltip here
console.log("mouseover" + i);
}).on('mouseout', function (e) {
//hide tooltip
console.log("mouseout" + i);
});
})(i);
}
}
}
There is another opportunity to get tooltips at hovering over the Highcharts legend. You just need to enable useHTML for the legend and redefine the labelFormatter function; this function should return the label text enclosed into the "span" tag. In this "span" tag one may include a class to apply jQuery-based tooltips (jQuery UI or Bootstrap for example). Also it is possible to transfer some data (for example, the index of a legend item) using the 'data-xxx' attribute:
labelFormatter: function () {
return '<span class="abc" data-index="' + this.index + '">' + this.name + '</span>';
}
Tooltips can be formatted as you wish; hyperlinks are also possible. The fiddle is here.
Although there're great answers already, I still want to share my simplified solution (inspired by the answers provided above).
If you just need a plain text tooltip, you can use title attribute of <span> (W3 School, title attribute - most often shown as a tooltip text when the mouse moves over the element.) No jQuery setup is needed then.
In your Highcharts options object set legend.useHTML: true & configure legend.labelFormatter:
legend: {
enabled: true,
useHTML: true,
labelFormatter: function () {
// if legendTooltip set, put it into title attr
if (this.options.custom && this.options.custom.legendTooltip) {
return '<span title="' + this.options.custom.legendTooltip + '">' + this.name + '</span>';
}
return '<span>' + this.name + '</span>';
}
},
And add custom.legendTooltip to the options object of a series you want a tooltip for:
series: [{
name: 'counter',
data: [110, 50, 130],
custom: {
// provide a tooltip text here:
legendTooltip: "Counter custom tooltip"
}
}]
(using custom obj is recommended by Highcharts)
Also see the JS fiddle: http://jsfiddle.net/uhocybpj/8/
You can do that.
At first, Highcharts has callback function.
https://stackoverflow.com/a/16191017
And modified version Tipsy can show tooltip in SVG.
http://bl.ocks.org/ilyabo/1373263
*Use jquery.tipsy.js and tipsy.css on this page.
Then, start highcharts like this.
$('#your-chart').highcharts(your_chart_options,function(chart){
$('#your-chart').find('.highcharts-legend-item').each(function(){
// set title text example
var _text = $(this).text(),
_title = '';
switch(_text){
case "legend 1":
_title = 'legend 1 title';
break;
case "legend 2":
_title = 'legend 2 title';
break;
}
// add <title> tag to legend item
$(this).append($('<title></title>').text(_title));
});
$('#your-chart').find(".highcharts-legend-item").tipsy({
gravity: 's',
fade: true
})
});
When styling a chart axis, a common style in publications is to include the unit or percentage sign only on the topmost label of the Y-axis. I am trying to figure out how to do this in Highcharts.
I know I can hard-code a number, like this:
yAxis: {
labels: {
formatter: function() {
if ( this.value == 12 ) {
return this.value + "%";
} else {
return this.value;
}
}
},
But this is not a very flexible solution.
Is there a way to test for the first (or nth) value displayed? Is there a way to get the index of a value within the formatter function?
2013 Update
This works in most circumstances:
if ( this.value == this.axis.getExtremes().max )
return this.value + '%';
else
return this.value;
However, it does not work if you have yAxis.endOnTick set to false—because in that case the maximum value of the axis is not the same as the highest label on the axis.
Is there a way to get that highest label from within the formatter function?
As far as I know, it isn't possible to find the 'nth' item on an axis, but first and last can be dome using the properties this.isFirst and this.isLast' in stead of checkingthis.value`
If you want to, you can also access the axis itself directly using this.axis, so you should be able to run whatever complex logic you want on the axis itself..
With 4.2.x version of highchart I have achieved it with following code
labels: {
formatter: function () {
if(this.isFirst)
return this.value + "%";
else
return this.value;
}
}
}
You could also add [%] to the name of the yAxis. Then you wouldn't have to tamper with the ticks.
You can draw at max value plotLine and after extremes are changed - remove and add new one). Then label for that plotLine you can set as '%' and move to the left side.
Another solution is to use axis title - set it to top and remove rotation.
The last solutions (or rather workaround) is to use second yAxis, and set there min and max(or tickPositions), and show only last label, and first hide.