I am working on Stacked Column Chart in Highcharts. I have a requirement that on every click of a legend the dataLabels on that series should be shown/hidden but the series/stack should not be hidden. So I only want to hide/show dataLabels.
I tried this and got the series to stop hiding by using this:
events: {
legendItemClick: function () {
return false; // <== returning false will cancel the default action
}
}
But I am not able to show dataLabels on click of a legend.
Here is the Fiddle Link.
legendItemClick: function (x) {
x.preventDefault()
var opt = x.target.chart.options.plotOptions.series;
opt.dataLabels.enabled = !opt.dataLabels.enabled;
x.target.chart.series[x.target.index].update(opt);
//x.target.chart.options.plotOptions.series.dataLabels.enabled=false
// <== returning false will cancel the default action
}
Thank you #undefined_variable for your answer.
I have found one more way to do it using this.
legendItemClick: function () {
var enabled = !this.options.dataLabels.enabled;
this.update({
dataLabels:{
enabled: enabled
}
});
return false;
}
Fiddle
Related
I"m using afterSetExtremes event to retrieve min and max x and y coordinates. Then, I add this series upon range selection. The problem is the series is not shown upon load. The simplest solution would be to simulate a range select on chart load. Is this possible? If not, is it possible to add this same series upon load?
xAxis: {
events: {
afterSetExtremes: function(e) {
var points = e.target.series[0].points,
minPoint = points[1],
maxPoint = points[points.length - 1]
if(minPoint.y < maxPoint.y)
{
var series_color = 'green';
}
else{
series_color = 'red';
}
chart.addSeries({
data:[{x:minPoint.x,y:minPoint.y},{x:maxPoint.x,y:maxPoint.y}],
color: series_color,
dashStyle: 'shortdot',
id: 'trend'
});
while(chart.series.length > 3)
{
chart.get('trend').remove();
}
}
}
}
See jsfiddle to see how it's currently working: http://jsfiddle.net/kd3aLp6m/
In load event you can use fireEvent method to trigger the afterSetExtremes event. Also, to increase performance, you can set the redraw parameter in addSeries metohd to false in all calls except the first one.
chart: {
...,
events: {
load: function() {
Highcharts.fireEvent(
this.xAxis[0],
'afterSetExtremes', {
redraw: true
}
);
}
}
},
Live demo: http://jsfiddle.net/BlackLabel/bdnho9uc/
API Reference:
https://api.highcharts.com/highcharts/chart.events.load
https://api.highcharts.com/class-reference/Highcharts#.fireEvent
Is there a way to set a back button when the data is set from point.events.click , it seems that setting it in
Highcharts.setOptions({
lang: {
drillUpText: 'Back'
}
});
does not work when it is set up in point.events.click, I've tried a few options within events and most I can do is setup an alert.
http://jsfiddle.net/efiallo/bh6e4Lyq/1/
Drillup button works only when the Highcharts drilldown module is imported and used. You implemented your own drilldown mechanism so the drillup button needs to be taken care of manually.
I aggregated all chart's defaults restoring operations in the restore function:
function restore() {
setChart(name, categories, data);
drillupBtn.destroy();
}
Then I added button handling in the point.events.click:
click: function() {
var drilldown = this.drilldown,
chart = this.series.chart;
if (drilldown) { // drill down
setChart(drilldown.name, drilldown.categories, drilldown.data, drilldown.color);
drillupBtn = chart.renderer.button("Drill up", 100, 100, function() {
restore();
}).add();
} else { // restore
restore();
}
}
Live demo: http://jsfiddle.net/kkulig/md416hec/
API reference: https://api.highcharts.com/class-reference/Highcharts.SVGRenderer#button
I have two series of points on a Highcharts scatter plot. One of the series is draggable. The other has a click event:
events: {
click: function(e) {
if (e.point.v != 0) {
if (e.point.options.p != 0) {
location.href = 'newPage.php?pID=' + e.point.options.p;
}
}
}
},
When I drag a point from the first series and leave it (mouse-up) over a point from the second series, the click event fires and the page is redirected.
I don't want that click event to occur when dragging a point over it.
You can try using the custom events plugin for this, so that for the second series the event is 'mousedown' and not click. That should solve the problem.
plotOptions: {
series: {
point: {
events: {
mousedown: function () {
alert(this.y);
}
}
}
}
}
A working example.
NOTE: You need to be running the latest version of Highcharts for this to work, which 3.0.7
How do I load a given drilldown by default in Highcharts? I'm using a piechart to display the data.
I've tried triggering a click function on the path element but that doesn't work.
$('.highcharts-drilldown-point:first').click()
You can trigger a drilldown on a point by calling point.doDrilldown().
To do it by default you could for example:
$('#container').highcharts({
chart: {
events: {
load: function(event) {
this.series[0].data[0].doDrilldown();
}
}
},
// ...
});
Or see this JSFiddle demonstration.
I am working on a 2 level column chart. I want to perform a task like showing an alert on clicking each bar on chart on drilldown series only. I have found this:
plotOptions: {
series: {
cursor: 'pointer',
point: {
events: {
click: function () {
alert('Category: ' + this.category + ', value: ' + this.y);
}
}
}
}
}
It works fine, but it fires for parent series too. Can we force this click event to work only on 2nd level series (that appears after drilldown)?
Because the this value of your click event will be a object with no values if you click a parent, you could do a check for an x value (or similar) to see if it was a destroyed parent or you are clicking a currently available point. Make sure it's a value you know your point will have.
For example (JSFiddle):
var UNDEFINED;
$('#container').highcharts({
plotOptions: {
series: {
point: {
events: {
click: function() {
if(this.x != UNDEFINED)
alert("It's alive!");
}
}
}
}
}
// ...
});
If it only concerns a specific series you could also consider adding the event code to those specific series, instead of doing this general code for all series.