I have more than one chart in one page, all of them uses same data but in different chart types.
I would like to change all of their time with only one navigator on the top. like using it as a datepicker input, how can i achieve that?
Use afterSetExtremes event callback function and apply the same extremes on the rest charts:
xAxis: {
events: {
afterSetExtremes: function(e) {
var min = e.userMin,
max = e.userMax;
chart1.xAxis[0].setExtremes(min, max, true, false);
chart2.xAxis[0].setExtremes(min, max, true, false);
}
}
}
Live demo: http://jsfiddle.net/BlackLabel/8gc9qwsp/
API Reference:
https://api.highcharts.com/class-reference/Highcharts.Axis#setExtremes
https://api.highcharts.com/highstock/xAxis.events.afterSetExtremes
Related
On this official Highcharts demo https://www.highcharts.com/demo/gantt/with-navigation
the display starts at the end
What do I need to change, so the navigation range starts at the beginning like so?
You can use setExtremes method in load event:
chart: {
events: {
load: function() {
const xAxis = this.xAxis[0];
xAxis.setExtremes(xAxis.dataMin, xAxis.dataMin + xAxis.max - xAxis.min);
}
}
}
Live demo: https://jsfiddle.net/BlackLabel/8tk52zdw/
API Reference: https://api.highcharts.com/class-reference/Highcharts.Axis#setExtremes
I have a Highchart Stock chart that shows EMA's using Stock chart indicator.
I do not want to use the rangefinder, as the chart should always show 100 candlesticks.
The EMA's work, but need to have extra candlesticks so that the first ones have EMA's. The API returns 100 candlesticks, but the first candlesticks do not have EMA's.
So, what is a good way to either:
Hide the first 50 candlesticks or
Only show the last 100 candlesticks?
I gather this might be done with the range selector, but not sure how to do it programatically.
You need to use setExtremes method. You can call it for example in load event:
chart: {
events: {
load: function() {
const points = this.series[0].points;
const min = points[points.length - 101].x;
this.xAxis[0].setExtremes(min, null, true, false);
}
}
}
Live demo: https://jsfiddle.net/BlackLabel/62djn43u/
API Reference: https://api.highcharts.com/class-reference/Highcharts.Axis#setExtremes
In this Highcharts column chart the user can drill down by clicking on the column.
This works fine, however all the data, including the data of the drilled column, needs to be available when the chart is firstly created.
What I need is to capture the drilldown event click and populate the chart with that information, sending the data only when the user clicked on a specific column. Is this possible?
Yes, it is possible and simple. You need to use drilldown event callback function, call API request in it and use addSeriesAsDrilldown method - as in the example below:
chart: {
type: 'column',
events: {
drilldown: function(e) {
if (!e.seriesOptions) {
var chart = this,
drilldowns = {
...
},
series = drilldowns[e.point.name];
// Show the loading label
chart.showLoading('Simulating Ajax ...');
setTimeout(function() {
chart.hideLoading();
chart.addSeriesAsDrilldown(e.point, series);
}, 1000);
}
}
}
}
Live demo: https://jsfiddle.net/BlackLabel/e9m74kgp/
API Reference:
https://api.highcharts.com/highcharts/chart.events.drilldown
https://api.highcharts.com/class-reference/Highcharts.Chart#addSeriesAsDrilldown
I built a line chart with more than 50 series: fiddle
Now I want to highlight one series by button click (opacity: 1). When I highlight another series, the first one should get its original opacity of 0.1 again.
With only two series I can achieve this by doing this:
$('#func1').click(function () {
var chart = $('#Weltweit').highcharts();
chart.series[3].update({opacity: 0.1});
chart.series[4].update({opacity: 1});
});
$('#func2').click(function () {
var chart = $('#Weltweit').highcharts();
chart.series[3].update({opacity: 1});
chart.series[4].update({opacity: 0.1});
});
But I cannot do this with 50 series because it takes too long to calculate. Is there a way to cancel the previous update before doing a new one?
Use the update method with redraw parameter set to false and redraw chart after loop:
chart.series.forEach(function(s) {
s.update({
...
}, false);
});
chart.redraw();
Live demo: http://jsfiddle.net/BlackLabel/3a9bfjgd/
API Reference:
https://api.highcharts.com/class-reference/Highcharts.Series#update
https://api.highcharts.com/class-reference/Highcharts.Chart#redraw
You can read here, similar with your problem: https://api.highcharts.com/highcharts/series.line.point.events.select
I have three highcharts containers on the same page and want to create a function which is available to all charts, so I have defined the function in setOptions. The function is working well but I don't know which graph has triggered the event.
How do I know which chart triggered the event?
plotOptions: {
series: {
cursor: 'pointer',
allowPointSelect: true,
point: {
events: {
select: function () {
alert($(this).attr('id')); // I need this to be the chart id
}
}
},
Two ways:
use this.series.chart.options.chart.renderTo to get string you have passed when creating chart
use this.series.chart.renderTo.id to get ID's string, (will be the same as above).
You can use this.series.chart to get the chart object that was clicked. I'm not sure how you're assigning an "ID" to your chart, but presumably having a handle to the chart itself will be sufficient.