I am just starting out with Highstock and I want to provide our users with the option of toggling the connection of the null data points via a button. Here is how I have tried to solve it: jsFiddle
// create the chart
var chart = new Highcharts.StockChart({
[...]
plotOptions : {
series : {
connectNulls : false // default
}
},
[...]
});
// Toggle connect nulls
var connectNulls = true;
$('#connectNulls').click(function() {
chart.plotOptions.series.connectNulls = connectNulls;
connectNulls = !connectNulls;
});
But it has no impact on the graph. All the examples I've found so far concerning toggling on chart configuration are doing dynamic manipulation on the series via the update method, but for the connectNulls I guess this is not possible.
I can always repaint the graph from scratch but I want to avoid this if possible. Say if one user has zoomed into the graph, repainting would cause the zoom to be lost.
Any suggestions?
You can use series.update() and then modify this param.
http://jsfiddle.net/vsmn60gL/3/
Related
actually I have an issue when I dispatch the event click on plot options of pie due to this generate a redraw of the chart. On my configuration I have this:
plotOptions: {
pie: {
events: { click: e => this.onClick(e) },
...
}
And below this function to emit the selected value:
// Catch the event on click a plot area.
onClick(event): void {
// Emit an event with information of selected plot.
this.plotSelected.emit(event);
}
And when I clicked on some point of the pie chart then all chart redraw return me all data for point in null values.
Hi I found a solution for my problem. Basically I'm using Higcharts with RxJs and assign as data an response for a BehaviorSubject directly. I change the way to assign the series data and my problem it's solved.
I have seen similar questions just like these (even with similar title) but none of them provide the answer I need.
I have a bar-negative-stack chart with drilldown.
In order to keep the Y-axis centered, I am calculating the maximum value among the series and setting it as the extremes of the chart.
The thing is I haven't find a good place to put this logic. I have tried putting it on redraw or render events but, since I am changing the yAxis, this causes a stackoverflow.
What I have so far that is more or less working is having the drilldown event set up with a setTimeout to delay the calculation, otherwise it would get the values before the drilldown. I would need some event like drilldownFinish.
Here's a working fiddle with this drilldown logic (not on negative-bar-stack though): http://jsfiddle.net/6qpq78do/
Any ideas on how to do this without a setTimeout?
Thanks
Maximum callstack exceeded message is caused by setExtremes function. Its third argument is redraw - it's true by default: https://api.highcharts.com/class-reference/Highcharts.Axis#setExtremes
So setExtremes will call the redraw event again and the redraw event will call setExtremes and so on...
The solution here is to create a flag (redrawEnbaled) that is going to control the access to the logic placed in redrawEvent and prevent this infinite recursive loop:
var redrawEnabled = true;
(...)
events: {
redraw: function() {
if (redrawEnabled) {
redrawEnabled = false;
let values = [];
this.series.forEach(s => {
s.yData.forEach(v => values.push(Math.abs(v)));
});
let max = values.reduce((acc, val) => (acc > val) ? acc : val, 0);
this.yAxis[0].setExtremes(-max, max);
redrawEnabled = true;
}
}
}
Live demo: http://jsfiddle.net/BlackLabel/zjuy21k5/
In my HighCharts implementation I'm dynamically changing the data of all series of the chart. This all works as expected, but the legend gets refreshed each time aswell causing the filtered legend to become unfiltered.
Let me explain with the following example.
If you look at this sample by HighCharts themselves you will see the legend showing 'John', 'Jane' and 'Joe' : http://www.highcharts.com/demo/column-stacked
If you click on John you'll only see the series of Jane and Joe. If you'd now refresh the underlieing series the legend will refresh and John his data will be visible again.
I need to prevent this from happening. Anybody got an idea on how I could do this?
FYI; I'm updating the data like this:
function updateSeries(data, chart, vm) {
for (var i = 0, len = chart.series.length; i < len; i++) {
chart.series[0].remove();
}
var series = calculateSeries(data, vm);
_.each(series, function (serie) {
chart.addSeries(serie, false);
});
chart.redraw();
}
I'm aware that I'm actually removing and re-adding the series, but that's because I'm unsure of how to do this otherwise.
I want to add a reference series to my charts (i.e. a reference price). Axis.addPlotLine() does it, but I want to be able to toggle this series from the legend; a plain plotLine does not show up in the graph's legend.
Another reason why plotLine does not seem like a good solution is that it does not get accounted for by the viewport calculations. Which means that toggling other series might lead to the plotLine appearing outside the viewport due to zooming.
The simplest way to accomplish what I want would be, to add a dynamic series via chart.addSeries. But it's impossible to call this method from within a triggered addSeries event because chart.addSeries is set to null while in the event handler.
Tying in to the redraw event creates a whole lot of difficulties as well, because render() can't be called anymore.
How would you go about it?
Update:
As per the comment of Pawel Fus, I unsuccessfully tried the following:
[…]
events: {
load: function (event) {
foo = this;
},
addSeries: function(event) {
console.log(foo) // returns chart object as expected
console.log(foo.addSeries) // undefined
}
}
Solution is to store addSeries on load event, and use stored function when adding series. Live example: http://jsfiddle.net/3bQne/808/
events: {
load: function (event) {
foo = this.addSeries;
},
addSeries: function (event) {
if (iterator) {
iterator--;
foo.call(this, {
data: [100, 200, 100, 100, 200, 300]
});
}
}
},
Still you can stick with plotLine only.
If the position of the line is static that is the best way.
If the position is dynamic then you can still go with plotLine.
There are events for adding and removing plotLine on the fly.
API link
removePLotLine() : http://api.highcharts.com/highcharts#Axis.removePlotLine
addPlotLine() : http://api.highcharts.com/highcharts#Axis.addPlotLine
I hope this will help you.
I have like 50 different series, so by default, I have them hidden, so the user simply clicks on the ones he wants to see.
Sometimes, one wants to show all, or hide all, quickly. I cannot figure out how to toggle all on/off. Is this possible at all? I assume so, but cannot figure out a way to do it.
Hide each series using series.setVisible(false, false), reference. - After all series will be hidden call chart.redraw() to redraw chart only once.
this solution is based on http://jsfiddle.net/pGuEv/
var chart = $('#chart-container').highcharts();
var $hide_show_all_button = $('#hide_show_all_series_button');
$hide_show_all_button.click(function() {
var series = chart.series[0];
if (series.visible) {
$(chart.series).each(function(){
this.setVisible(false, false);
});
chart.redraw();
$hide_show_all_button.html('show all');
} else {
$(chart.series).each(function(){
this.setVisible(true, false);
});
chart.redraw();
$hide_show_all_button.html('hide all');
}
});