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
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 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
I want to show some bars' tooltip as default (not all of them) without hovering on them. is there any way to do this?
After chart is loaded, you can use onMouseOver point's method to display a tooltip.
chart: {
events: {
load: function() {
this.series[0].points[3].onMouseOver();
}
}
}
Live demo: https://jsfiddle.net/BlackLabel/dnao0rv6/
API Reference: https://api.highcharts.com/class-reference/Highcharts.Point#onMouseOver
I have a highstock chart witch candlestick data type.
When I mouseover the data point, I want to highlight the background of the point.
This is what tooltip -> crosshairs do:
tooltip: {
crosshairs: true
}
But the only width option to set is the fixed width. See http://jsfiddle.net/8YBd7/.
This fixed width works with initial zoom, but when I change the zoom, the width is not updated with new point width.
When I set 100% width, the crosshair would fill entire chart area:
tooltip: {
crosshairs: {
width: '100%'
}
}
Is there another option how to highlight current data point by changing its background or setting the width to the pointPixelInterval or something else?
Meanwhile, I produced a dirty workaround, so improvements are welcomed:
xAxis: {
events: {
afterSetExtremes: function() {
this.chart.tooltip.crosshairs = [];
this.chart.options.tooltip.crosshairs.width = (this.width / (this.series[0].points.length-1));
}
}
}
http://jsfiddle.net/QbdEu/1/
Whenever the zoom is changed, the width is recounted according to chart width and number of displayed data points. The width is not updated when calling redraw(), so the old crosshair needs to be removed.
Have you tried to use Renderer http://api.highcharts.com/highstock#Renderer.rect() which allows to plot any shapes and defined width? Only what you need is getting point width in pixels frpm(chart.series[0].data[0].graphic) and then setting correct widht of "shape".