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.
Related
I am trying to hide a node on click in network graph. How can I hide a node in Network graph using highcharts?
I already tried removing the node in the series and updating the chart. Is there a better way?
To hide a specific point on a click event use remove method:
plotOptions: {
networkgraph: {
...,
point: {
events: {
click: function() {
this.remove();
}
}
}
}
}
However, there is a bug in a networkgraph chart, related with remove method (reported here: https://github.com/highcharts/highcharts/issues/10565), so additionally you need to use a workaround:
Highcharts.wrap(
Highcharts.seriesTypes.networkgraph.prototype, 'generatePoints',
function(p) {
if (this.nodes) {
this.nodes.forEach(function(node) {
node.destroy();
});
this.nodes.length = 0;
}
return p.apply(this, Array.prototype.slice.call(arguments, 1));
}
);
Live demo: https://jsfiddle.net/BlackLabel/m9tjb481/
API Reference: https://api.highcharts.com/class-reference/Highcharts.Point#remove
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 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
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
On a Highcharts bar chart, when the user clicks one of the bars, additional data is loaded elsewhere on the page via the loadDetails function.
loadDetails is specified as a click callback function for a chart via plotOptions.series.events:
var chart = new Highcharts.Chart({
defaultSeriesType: 'bar',
...
plotOptions: {
series: {
events: {
click: loadDetails
}
}
},
...
});
function loadDetails() {
...
}
The problem is I need to call the same callback function for a touchstart event on mobile devices.
There doesn't seem to be any obvious way of adding a touch event handler via the Highcharts API as far as I could tell: http://api.highcharts.com/highcharts#plotOptions.series.events.
Has anyone got any idea how to add callback functions for touch events, or trigger the click callback function from a touch event?
Yeah, something like this is not supported, I advice you to create idea here.
The only workaround which comes to my mind is use Element.on function to add custom events to elements which exists on a chart. For example: http://jsfiddle.net/3bQne/269/
chart: {
renderTo: 'container',
events: {
load: function(){
var chart = this,
path = chart.series[0].tracker;
path.on('click', function() {
alert("click");;
});
}
}
}
This works. I was trying to get Highcharts to work with Apple Pencil. I used code above but included markerGroup (along with tracker) so event triggers when user click on points along with lines of a series. I use ‘touchstart’ event to trap apple pencil click. See below.
chart: {
renderTo: 'container',
events: {
load: function(){
var chart = this,
path = chart.series[0].tracker;
path2 = chart.series[0].markerGroup;
path.on('touchstart', function() {
alert(“touch");
});
path2.on('touchstart'), function() {
alert(“touch 2”);
});
}
}
}