Is there any way to toggle the custom button text in highcharts?
toggleButton: {
text: 'ON',
onclick: function () {
console.log($(this).text());
$(this).text(function (i, text) {
return text === "ON" ? "OFF" : "ON";
});
}
}
Demo Link
this in callback refers to the chart itself. Buttons are stored in chart.exportSVGElements array. So, here is the solution: http://jsfiddle.net/knmb38dy/1/
toggleButton: {
text: 'ON',
onclick: function () {
var button = this.exportSVGElements[0], // 0 = text element, 1 = rect button
$button = $(button.element); // in "element" stored is reference to the DOM object
text = $button.text() == "ON" ? "OFF" : "ON";
button.attr({
text: text
});
}
}
Note using Highcharts built-in method attr() for updating text, not jQuery's text().
Edit:
For Highcharts 4.2.3+ use the solution below: http://jsfiddle.net/knmb38dy/33/
The only difference is how to get button in jQuery: $button = $(button.element.lastChild).
Related
In a Highcharts heatmap, I define a click event as usually:
options.plotOptions = {
series: {
cursor: 'pointer',
point: {
events: {
click: function() {
/* action */
}
}
}
}
};
How can I get the xAxis and yAxis information in this function?
For example, in this demo, when I click 0.67 at the top left conner, I want to alert "Friday, Alexander".
Can I pass arguments to this function? Or is there any other approach?
Thanks! : )
The event has the point attached to it. So, you can do something like this:
click: function (event) {
var str = event.point.series.yAxis.categories[event.point.y] + ',' +
event.point.series.xAxis.categories[event.point.x]
alert(str);
}
http://jsfiddle.net/blaird/3UWaA/26/
I have a Highstock chart set up with flags marking events. In the text attribute of the flag I have an anchor HTML element with the target property set to _blank, however when I click the link, the page is opened in the current page/tab as opposed to a new page/tab.
Can someone from the Highcharts team confirm if this use case is supported?
An example flag element:
{
x : Date.UTC(2014,0,21),
title : '3',
text : 'Brussels Sprouts Salad with Pecorino, Hazelnuts & Honey'
}
Thanks!
It is not opened, becasue html element is parsed to SVG object. You need to catch click event and use window.open()
plotOptions: {
flags: {
point: {
events: {
click: function (e) {
e.preventDefault();
var url = this.url;
window.open(url, '_blank');
}
}
}
}
},
http://jsfiddle.net/7AegD/3/
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
})
});
I'm working with Highchart.
I've got a multiple series graph in which each series have their own y-axis.
pretty much like this one (jsfiddle)
when we click on the legend item for a series, it hides it and the associated y-axis
(using showEmpty:false helped hiding also the name of the axes)
What I'm trying to achieve is hiding the y-Axis of a given series without hiding the series itself.
I tried to hide it by modifying the showAxis property like this :
serie.yAxis.showAxis = false;
but it doesn't work.
Anyone knows how I should do ?
EDIT : I managed to edit the text so I can remove the axis title by setting the text to null but its not enough to hide the whole axis and its values.
here's what i did to edit the text:
serie.yAxis.axisTitle.attr({
text: null
});
Highcharts 4.1.9+
Since 4.1.9, there is an option Axis.visible which can be used to show/hide an axis, demo: http://jsfiddle.net/3sembmfo/36/
Older versions of Highcharts
It's a new feature for Highcharts 3.0 - that allows to update axes in realtime: chart.yAxis[0].update(object) - as object takes the same options as for creating chart. For example:
chart.yAxis[0].update({
labels: {
enabled: false
},
title: {
text: null
}
});
And jsFiddle: http://jsfiddle.net/39xBU/2/
EDIT:
Use below snippet to hide/show axis by just calling axis.hide() and axis.show(). Live demo: http://jsfiddle.net/39xBU/183/
(function (HC) {
var UNDEFINED;
HC.wrap(HC.Axis.prototype, 'render', function (p) {
if (typeof this.visible === 'undefined') {
this.visible = true;
}
if(this.visible) {
this.min = this.prevMin || this.min;
this.max = this.prevMax || this.max;
} else {
this.prevMin = this.min;
this.prevMax = this.max;
this.min = UNDEFINED;
this.max = UNDEFINED;
}
this.hasData = this.visible;
p.call(this);
});
HC.Axis.prototype.hide = function () {
this.visible = false;
this.render();
HC.each(this.plotLinesAndBands, function (plotLine) {
plotLine.render();
});
};
HC.Axis.prototype.show = function () {
this.visible = true;
this.render();
HC.each(this.plotLinesAndBands, function (plotLine) {
plotLine.render();
});
};
})(Highcharts);
It's actually gotten simpler. You only have to set the yAxis title attribute to false:
yAxis: {
title: false
},
Here is an example: jsfiddle example
We can hide Yaxis label without hiding the y-Axis without hiding the series by returning the empty string as follows:
yAxis: {
title: '',
labels: {
formatter: function() {
return '';
},
style: {
color: '#4572A7'
}
}
},
For newer versions (I'm using the 6.2.0), the yAxis property has a parameter called gridLineWidth. Just set it to 0 and the grids for that axis are going to disappear. In this JSFiddle there is an example of it.
However, if you are in styled mode this it's trickier. Here, you have to set a className for the target axis and then set the CSS like this:
.highcharts-yaxis-grid {
&.right-axis {
path {
stroke: none;
}
}
}
For example, this will make dissapear the grids of the axis with a className set as right-axis. This allow to have different styles for the multiple axis.
using Highchart I'd like to select series by clicking on it and change its width on selection ( so we can see it is selected)
the thing is, the selection seems to work (it toggles the selected value displayed in console) but I can't figure out how I can set a lineWidth from the click event :
the example is working to select series :
line: {
events: {
click: function(event) {
this.select();
console.log( this.name+", selected : "+ this.selected);
return false;
}
}
}
I can also show / hide series, but how can I change the lineWidth ?
I managed to display the tooltip only for selected series, but I need those series to be more visible than the others.
I've tried to add a select state on the series as it works on markers but it doesn't seem to work for lines :
series: {
states: {
select: {
lineWidth: 10
}
},
...
}
Use setState instead.
this.setState(this.state === 'select' ? '' : 'select');
Demo