Have an issue while exporting data from Highcharts in react v2.1.3 ( highcharts-react-official )
My use case:
PDF export should have all data points in it ( e.g if current view shows 5 data points and on scroll there are 5 more the exported pdf should have all 10 data points )
Images ( JPEG and PNG ) should only have current view export ( Whatever is visible should be exported )
Problem:
Initial exporting options:
chartOptions: { xAxis: [{max: undefined, min: undefined}] // to export all }
However this has a problem with scroll
If I export graph without scrolling the graph export has all data points but if I export after scrolling a bit the exported graph has only current visible chart
Expected: Export all event after scrolling
Current Behaviour: After scroll exports only current visible
You can wrap exportChart method and adapt axis extremes depending on the exporting type. For example:
(function(H) {
H.wrap(H.Chart.prototype, 'exportChart', function(proceed, options) {
const xAxis = this.xAxis[0];
const extremes = xAxis.getExtremes();
if (options && options.type === 'application/pdf') {
xAxis.setExtremes(null, null);
}
proceed.apply(this, Array.prototype.slice.call(arguments, 1));
xAxis.setExtremes(extremes.min, extremes.max);
});
}(Highcharts));
Live demo: http://jsfiddle.net/BlackLabel/cbmus1xg/
Docs: https://www.highcharts.com/docs/extending-highcharts/extending-highcharts
Related
I am looking to find a way to control line height for plot band labels in styled mode. The useHTML property doesn't work in my case as I need styles to persist in the downloaded PNG. I was looking for a solution similar to this.
I've tried adding something similar, but it completely broke my chart.
function (p) {
p.call(this);
const plotLine = this;
plotLine.label?.css(merge(this.options.label.style));
Here's a simple fiddle describing the issue, seems like no matter what is the font size the dy prop stays 15.
Appreciate if someone can help.
In this case, you need to wrap Highcharts.PlotLineOrBand.prototype render function. Check the following code and demo:
(function(H) {
H.wrap(H.PlotLineOrBand.prototype, 'render', function(proceed) {
proceed.apply(this, Array.prototype.slice.call(arguments, ));
const label = this.label;
if (label) {
label.css({
lineHeight: label.alignOptions.style.lineHeight
})
}
});
}(Highcharts));
More about Extending Highcharts:
https://www.highcharts.com/docs/extending-highcharts/extending-highcharts
Demo:
https://jsfiddle.net/BlackLabel/nsg5abhq/
I'd like to get some datalabels showing inside segments of a doughnut chart where there is suitable space to do so.
I know I can use negative distance values on the the data labels config options, but I wonder how I can achieve this dynamically based on the values\size of the segments.
Is such a technique achievable? Can I have a mix of data labels outside of the segments connected with lines (connectors) and others inside the actual segments?
My starting point so far based off the official highcharts example pie chart code: https://jsfiddle.net/parky12/tbnjypse/1/
You can for example use chart.load event and change distance, x or y properties for an individual point. For example:
events: {
load: function() {
this.series[0].points.forEach(point => {
if (point.y > 5) {
point.update({
dataLabels: {
distance: -50
}
// avoid redraw after each update
}, false);
}
});
this.redraw();
}
}
Live demo: https://jsfiddle.net/BlackLabel/Lco29fdj/
API Reference: https://api.highcharts.com/class-reference/Highcharts.Point#update
I use reflow = true to make sure my chart fit the width of the container div on resizing the window, so the XAxis will also change.
But when export, different size charts exported as the same size, and the XAxis are not as same as shown.
demo: https://jsfiddle.net/8zb9k5j6/
Is there any way to solve this? Thanks for your help
For example:
Full-screen, my XAxis is (4.Dec, 20.Dec, 3.Jan, 31.Jan, 14.Feb, 28.Feb)
Full-screen
When export as PNG(or whatever), my XAxis is (4.Dec, 20.Dec, 3.Jan, 31.Jan, 14.Feb, 28.Feb), that's what I want.
Full-screen-export
When I zoom out of the browser, the size of the chart will also decrease, my XAxis is (Dec'21, Jan'22, Feb'22)
small-size
When export as PNG(or whatever), my XAxis is (4.Dec, 20.Dec, 3.Jan, 31.Jan, 14.Feb, 28.Feb), that's not what I want, I want (Dec'21, Jan'22, Feb'22).
small-size-export
The chart export function renders the chart from initial - any changes, like zoom, extremes changes are not applied to the chart config. If you want to apply those changes you will need to add custom logic in the load event, like:
chart: {
events: {
load() {
const chart = this;
if (chart.renderer.forExport) {
console.log('aaply custom changes')
}
}
}
},
Demo: https://jsfiddle.net/BlackLabel/wfua8rye/
API: https://api.highcharts.com/highcharts/chart.events.load
I am using the render event to alter the positioning of of my x-axis labels on a highchart. It works great - centering labels between ticks on a datetime x-axis and removing the last label.
When I export the chart - with the same setup - the function is called (see centerTimelineLabels below), but it cannot access the rendered x-axis labels. Please see the images below showing the different x-axis labels in the DOM and as an exported PNG.
jsfiddle here: https://jsfiddle.net/SirMunchington/36xcbr7m/52/
Specifically, this.container inside of the function, is an empty wrapper on export... no children.
Is there a way to access and manipulate the x-axis labels in a highchart when exporting?
exporting: {
chartOptions: { // specific options for the exported image
chart: {
backgroundColor: '#ffffff',
events: {
render: centerTimelineLabels
}
}
},
...
var centerTimelineLabels = function() {
var labels = $('.highcharts-xaxis-labels span', this.container).sort(function(a, b) {
return +parseInt($(a).css('left')) - +parseInt($(b).css('left'));
});
$(labels).css('margin-left',
(parseInt($(labels.get(1)).css('left')) - (parseInt($(labels.get(0)).css('left')) + parseInt($(labels.get(1)).width()))) / 2
);
$(labels.get(this.xAxis[0].tickPositions.length - 1)).remove();
};
CORRECT X-AXIS VIA WEB
INCORRECT X-AXIS VIA EXPORT
Thank you for the demo.
Try to use this config - notice that the render event triggers after each chart redraw:
"events": {
render() {
let chart = this,
xAxis = chart.xAxis[0],
ticks = xAxis.ticks,
firstTick = ticks[xAxis.tickPositions[0]],
secondTick = ticks[xAxis.tickPositions[1]],
ticksDistance = secondTick.mark.getBBox().x - firstTick.mark.getBBox().x;
for (let i in ticks) {
let tick = ticks[i];
if (!tick.isLast) {
tick.label.translate(ticksDistance / 2, 0)
}
}
}
}
Demo: https://jsfiddle.net/BlackLabel/o06r1yfw/
To hide the last label set the xAxis.showLastLabel property to false.
API: https://api.highcharts.com/highcharts/xAxis.showLastLabel
by default, you can zoom in a highcharts map then tap and hold left mouse button and you can move the map on y axis, is it possible to do this on x axis?
I have tried to use zoomType:'xy', but it does not work
this is the demo from highchart official
That is a regression bug which is reported here: https://github.com/highcharts/highcharts/issues/12671
As a workaround use Highmaps v7.2.1 with the below plugin:
(function (H) {
H.wrap(H.Chart.prototype, 'pan', function (proceed) {
H.each(this.yAxis, function (axis) {
axis.fixTo = null;
});
proceed.apply(this, Array.prototype.slice.call(arguments, 1));
});
})(Highcharts);
Live demo: https://jsfiddle.net/BlackLabel/9ue0v4gz/
Docs: https://www.highcharts.com/docs/extending-highcharts/extending-highcharts