On sample provided by Highcharts https://jsfiddle.net/gh/get/library/pure/highcharts/highcharts/tree/master/samples/stock/plotoptions/series-datagrouping-last-anchor after clicking on rangeSelector button (YTD) the XAxis freezes and does not extend and does not move to show newly added points (despite having: lastAnchor: 'lastPoint')
dataGrouping: {
approximation: 'average',
enabled: true,
forced: true,
units: [
['millisecond', [5]]
],
lastAnchor: 'lastPoint'
}
After clicking on All it works again.
How to make the chart to show newly added points while rangeSelector is on?
Related
I have a line on a chart with a marker (icon). Highcharts is hiding the icon based on some behavior I do not know about.
The code to add 'points' to my data series ('output') looks like (I know enabledThreshold is redundant, but had to try something) this:
output.push({
id: id,
data: points,
keys: ['x', 'y', 'marker'],
marker: { enabled: true, enabledThreshold: 0, },
color: 'transparent',
lineWidth: 1,
animation: false,
showInLegend: false,
enableMouseTracking: false,
});
Here is an image of the browser with the marker:
And this is what happens if I make the browser window just a little less wide:
The little red icon is gone (making the browser wider will bring it back). I want the icon there 100% of the time.
Thanks raf18seb, you nailed it. Unfortunately dataGrouping is enabled by default, so it is necessary to disabled it:
dataGrouping: {
enabled: false,
forced: false // not sure this is necessary but whatever
},
Generally I seem to have a lot of code over-riding highcharts default behaviors...
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.
Please take a look at JSFIDDLE. Here, the green bar doesn't display any value. I know adding overflow:"none", crop:false will display the value. But it goes out of plotting area, sometimes for larger numbers it overlaps title. I would like to get green bar value (ONLY) inside the bar instead of hiding the value.
For particular column (i.e green column) label value to be inside, you can add attribute inside: true in data .Refer dataLabels.inside for more info
series: [{
color: colors[0],
showInLegend: false,
data: [{
....//first value
, {
y: 3500,
name: 'Second',
color: colors[1],
dataLabels: {
inside: true //labels will be inside column
}
},... // third and remaining
});
Fiddle demonstration
I use Highcharts to visualize 3D charts in my project. Particularly I am interested in showing a 3D scatter plot like this. Below the chart you can see the options as well as the respective jsFiddle.
Is there a possibility to display a label with every point's name always i.e. that hovering is not required?
Thanks!
Within the series you can enable the datalabels like this:
series: [{
dataLabels: {
enabled: true,
},
}]
http://jsfiddle.net/oghokm8w/1/
then you could use the formatter to customise the text to be displayed:
series: [{
dataLabels: {
enabled: true,
formatter: function () {
return this.point.x;
},
}
}]
I want to remove the parts of the highStock as shown in the picture.
They dont make sense in my data formatting .
Please help
Here you are: http://jsfiddle.net/cpvLzLso/
rangeSelector: {
selected: 4,
inputEnabled: false,
buttonTheme: {
visibility: 'hidden'
},
labelStyle: {
visibility: 'hidden'
}
}
We are simply hiding all texts and buttons.
And user is able to change default chart interval by changing a selected parameter in rangeSelector settings group.
But you'd better use a Jugal's solution if you don't need to disable navigator bar.
UPD 1: Updated on 23/06/15 to meet today's realities. To all of you who downvoting this answer: try to disable a navigator in Jugal's answer and then pan a chart.
Highchart supports this out of the box by setting the enabled property of the rangeSelector to false as follows
rangeSelector:{
enabled:false
}
disabled RangeSelector # jsFiddle
If you want to remove the "From to" boxes you can do like this:
rangeSelector:{
inputEnabled: false,
}
If you want to remove every range selector you have to write that row:
rangeSelector:{
enabled: true,
}
And if you want to do the zoom buttons disabled, you have to write this
rangeSelector:{
allButtonsEnabled: true,
}