For some reason in Highstock, adding a plotband doesn't draw a rectangular band!?
There are two charts on their own y-axis but sharing the same x-axis.
I'm adding the plotbands dynamically after the chart has loaded:
}, function(chart) { // on complete
var i = 0;
data.exits.forEach(function(time) {
i++;
chart.xAxis[0].addPlotBand({
from: time[0]*1000,
to: time[1]*1000,
label: {
text: "Exit"
},
color: '#000',
id: 'plot-band-'+i
});
});
});
Accorcing to Pawel Fus, this was a bug in 1.3.10 version of Highstock. The current newest version 2.0.0 fixed this bug.
Related
Example jsfiddle link: https://jsfiddle.net/uzmjvn4t/
I tried changing the scrollablePlotArea props but it didnt work, the scrollbar didnt change from x to yAxis.
chart.update({
chart: {
type: "spline",
scrollablePlotArea: {
minWidth: 800,
minHeight: undefined,
}
},
});
It looks like a bug. I reported it on the Highcharts Github issue channel where this thread will be continued: https://github.com/highcharts/highcharts/issues/14758
As I am forcing Highcharts to show the last label on the xaxis, this last label is partially hidden, or partly disappears:
Why is that? And what can I do? Setting the »marginRight« in the »chart« settings does not do the trick.
Thanks for any hints.
You can set align: 'right' attribute for the last label:
chart: {
events: {
render: function() {
var ticks = this.xAxis[0].ticks;
Highcharts.objectEach(ticks, function(tick) {
if (tick.isLast && tick.label.xy.opacity) {
tick.label.attr({
align: 'right'
});
}
});
}
}
}
Live demo: https://jsfiddle.net/BlackLabel/tv5f0x2a/
API Reference: https://api.highcharts.com/class-reference/Highcharts#.objectEach%3CT%3E
This might be the chart container width being too small, or the chart itself is too small.
You should try:
have you tried changing chart width? https://api.highcharts.com/highcharts/chart.width
try making the container for the chart wider
I'm trying to add SMA (Simple moving average) into my highstock with dataGrouping.
dataGrouping works fine without SMA. But when I add SMA it only group data on daily basis. Has anyone got the same problem?
I've checked the chart element and I can see the series & SMA object they all got the dataGrouping attribute but still not display properly in the chart.
I tried to add dataGrouping in both plotOptions.series & plotOptions.sma or add it in series respectively but none of them work.
let dataGrouping = {
forced: true,
units: [
['week', [1]],
]
};
const options = {
//...
plotOptions: {
candlestick: {
color: 'green',
upColor: '#e00000',
},
series: {
marker: {
enabled: false,
},
states: {
hover: {
enabled: true,
lineWidth: 1.5,
}
},
dataGrouping,
},
sma: {
dataGrouping,
}
},
}
My highcharts verion is 6.0.7
I also tried to add dataGrouping on an official example and here's the link: http://jsfiddle.net/tuuz4yho/8/
and here's another example with a simple line chart
https://jsfiddle.net/Lyf6vzev/19/
But dataGrouping still not work on SMA lines.
Anyone know how to group SMA weekly or monthly?
Really need your help!
Thanks! :)
Turns out it's a known bug:
https://github.com/highcharts/highcharts/issues/7823
The workaround is setting dataGrouping.approximation and dataGrouping.groupPixelWidth in the indicator config.
I want to be able to toggle colors on and off Points in a Highcharts pie chart.
Here's the sequence of operations
First I will render the chart
Next I will update the series.point color using point.update
this.chart.series[0].points[0].update({color: 'red'});
Then I want to unset the color I applied in step 2
Aside from caching the original color. I have tried
this.chart.series[0].points[0].update({color: void 0});
this.chart.series[0].points[0].update({color: null});
I've tested that this works on on series.update, such as
this.chart.series[0].update({color: void 0})
How can I unset the color on Point?
Currently my workaround is to redraw the whole chart! Feel like this might be a bug in Highcharts.
Fiddle demo to show steps as required
// Initiate the chart
var chart = Highcharts.chart('container', {
chart: {
type: 'pie',
},
series: [{
name: 'Installation',
data: [43934, 52503, 57177, 69658, 97031, 119931, 137133, 154175]
}]
});
// function for update color
function update() {
chart.series[0].points[0].update({
color: 'red'
});
};
// function for unset color
function unsetColor() {
chart.series[0].points[0].update({
color: Highcharts.Color(Highcharts.getOptions().colors[0]).input
});
}
I am using Highcharts to draw a chart of my data.When I am having a column chart and when I drill down in it, after drill down the chart moves up from the x-axis. This is the x-axis and y-axis settings:
xAxis: {
labels: {
rotation: -20,
align: 'right'
}
},
yAxis: {
min: 0
}
Let me know if anybody has any solution for this.
PLease update the version of the highcharts to 4.0.4, because the previous one had some bugs. It worked for me.