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/
Related
I want to use Accessible line chart of Highcharts (https://www.highcharts.com/demo/accessible-line)
In demo, I saw some series label position on last point, some in middle and first point.
How can I set all series label on last point?
Sorry for my bad English!
You can use data labels instead of series labels.
Example:
plotOptions: {
series: {
dataLabels: {
enabled: true,
formatter: function() {
if (this.point.index === this.series.points.length - 1) {
return this.series.name;
}
}
},
...
}
}
Live demo: https://jsfiddle.net/BlackLabel/9ps2ckhr/
API Reference: https://api.highcharts.com/highcharts/plotOptions.series.dataLabels
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
In Highcharts time series currently we are able to zoom in data and we can reset zoom through button but i want something that can zoom out in steps in same manner like how we zoom in. Is there any way? Any help would be great.Thanks in advance
The idea is to find, after zooming selection, new xAxis extremes, and keep them in extremesXmin and extremesXmax arrays, then set these previous extremes after clicked resetZoomButton:
chart: {
zoomType: 'x',
events: {
selection: function(e) {
if (e.xAxis) {
extremesXmin.push(e.xAxis[0].min)
extremesXmax.push(e.xAxis[0].max)
}
zoomLevel++;
}
}
},
To control the button and set new extremes, you need to overwrite zoomOut() function inside showResetZoom() function inside Highcharts prototype:
function zoomOut() {
if (zoomLevel > 1) {
chart.xAxis[0].setExtremes(extremesXmin[extremesXmin.length - 2], extremesXmax[extremesXmax.length - 2])
extremesXmin.pop()
extremesXmax.pop()
zoomLevel--;
} else {
chart.zoomOut();
}
}
Working demo: https://jsfiddle.net/BlackLabel/h8af7L9g/
How do I hide the bar data by clicking the bar and refresh the chart? I would like to have almost the same functionality as clicking on the legend.
Jsfiddle: https://jsfiddle.net/Nadiyaka/005z7dut/1/
For example, if I click on 'Asia' bar, I want the data to become hidden and the chart to be reloaded to see other data bigger.
So far I'm able only to hide the data, but the chart isn't refreshing:
series: [{
data: [1052, 954, 4250, 740, 38],
events: {
click: function(e) {
var chart = $("#container").highcharts();
index = event.point.x;
chart.series[0].data[index].graphic.hide();
chart.series[0].data[index].dataLabel.hide();
}
}
}]
There is no option for hiding points (except the points in pie series), but you can achieve the same effect by setting the point's value to null.
events: {
click: function(e) {
var point = e.point;
point.series.chart.pointer.reset(false); // this is needed to prevent the tooltip from moving around
point.update({
y: null,
holdY: point.y // I preserve original value needed on showing
});
}
}
For showing the columns, attach events to labels
load: function() {
var chart = this,
points = this.series[0].data;
points.forEach(function(point) {
chart.xAxis[0].ticks[point.x].label.on('click', function() {
if (point.y === null) {
point.update({
y: point.holdY
});
}
});
});
}
example: https://jsfiddle.net/005z7dut/2/
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);
}
}
},
// ...
});