I have created my own master-detail chart following the Highcharts docs and this example: https://www.highcharts.com/demo/dynamic-master-detail
Eveything works fine but I would like to add a feature: When the chart is loaded the last 50 data points should automatically be selected in the master chart and thus shown in the detail chart.
I tried to manually trigger the selection event but it did not work out. Any idea how to solve this?
You can fire selection event in chart load event and set correct extremes:
chart: {
...
events: {
load: function() {
var points = this.series[0].points,
xAxis = this.xAxis[0];
Highcharts.fireEvent(this, 'selection', {
xAxis: [{
min: points[points.length - 51].x,
max: points[points.length - 1].x
}],
});
},
selection: function(event) {
...
}
}
}
Live demo: https://jsfiddle.net/BlackLabel/xy8qug9h/
API: https://api.highcharts.com/highcharts/chart.events.load
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
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
Building upon my previous question here SO
I want to reach this desired affect on mouse hove. Draw multiple series like so
Could you please recommend highstock best practice for the same?
Thanks
You can add an additional series in the first mouseOver event and then update its data. For example:
series: [{
data: [...],
point: {
events: {
mouseOver: function() {
var chart = this.series.chart;
if (!chart.series[1]) {
chart.addSeries({
data: additionalData[this.index].slice()
});
} else {
chart.series[1].setData(
additionalData[this.index].slice()
);
}
}
}
}
}]
Live demo: http://jsfiddle.net/BlackLabel/ufa2ygvm/
API Reference:
https://api.highcharts.com/class-reference/Highcharts.Chart#addSeries
https://api.highcharts.com/class-reference/Highcharts.Series#setData
I already know what chart save as image in client-side(web)
and I know save as image in server-side(phantom.js)
but the chart has a scroll and
I want to save full screen(end scrolling) as one image file
enter image description here
How can I do that?
thnx
You can add additional chart options using exporting.chartOptions property. Check demo I posted you below with xAxis scroll enabled and additional options to export where the scroll is disabled on chart load event.
Code - exporting.chartOptions :
exporting: {
chartOptions: {
chart: {
events: {
load: function() {
var chart = this,
max = chart.xAxis[0].dataMax;
this.update({
xAxis: {
max: max,
scrollbar: {
enabled: false
}
}
});
}
}
}
}
}
Demo:
https://jsfiddle.net/r1p47ekj/
I have a highstock chart with navigator synced with 4 highcharts graphs. I'd like to initially display YTD on all 5 charts, but the following gives me an xaxis error. Looks like it needs to be set after all charts are rendered. I've tried several places to no avail.
rangeSelector: {
selected: 3
},
Any suggestions?
If it's not too much trouble,here's the site I'm working on. The code of 5 charts is too lengthy to display here. Click on any icon.
The problem is that setting rangeSelector.selected: 3 triggers your xAxis.events.setExtremes function, which refers to your other charts that have not yet been initialized, and it causes an error.
To fix this you could simply move your chart1 constructor to the end, and do the other charts first.
In short:
$('#container2').highcharts({
// ...
});
$('#container3').highcharts({
// ...
});
$('#container4').highcharts({
// ...
});
$('#container5').highcharts({
// ...
});
$('#container1').highcharts('StockChart', {
rangeSelector: {
selected: 3
},
xAxis: {
events: {
setExtremes: function (e) {
var thisMin = e.min,
thisMax = e.max,
chart2 = $('#container2').highcharts();
chart3 = $('#container3').highcharts();
chart4 = $('#container4').highcharts();
chart5 = $('#container5').highcharts();
chart2.xAxis[0].setExtremes(thisMin, thisMax);
chart3.xAxis[0].setExtremes(thisMin, thisMax);
chart4.xAxis[0].setExtremes(thisMin, thisMax);
chart5.xAxis[0].setExtremes(thisMin, thisMax);
}
}
},
// ...
});