Recently I found my pages with Highstock breaks. When clicking the range selector button, which I had defined the dataGrouping function, the series before grouping is still shown in the chart.
img: the overlapping series
so I went back to find the API reference. It turned out that the example given in the API doc has the same issue with mine:
the jsfiddle of the official example
$.getJSON('https://www.highcharts.com/samples/data/jsonp.php?filename=aapl-c.json&callback=?', function (data) {
// Create the chart
Highcharts.stockChart('container', {
chart: {
height: 300
},
rangeSelector: {
allButtonsEnabled: true,
buttons: [{
type: 'month',
count: 3,
text: 'Day',
dataGrouping: {
forced: true,
units: [['day', [1]]]
}
}, {
type: 'year',
count: 1,
text: 'Week',
dataGrouping: {
forced: true,
units: [['week', [1]]]
}
}, {
type: 'all',
text: 'Month',
dataGrouping: {
forced: true,
units: [['month', [1]]]
}
}],
buttonTheme: {
width: 60
},
selected: 2
},
title: {
text: 'AAPL Stock Price'
},
subtitle: {
text: 'Custom data grouping tied to range selector'
},
_navigator: {
enabled: false
},
series: [{
name: 'AAPL',
data: data,
marker: {
enabled: null, // auto
radius: 3,
lineWidth: 1,
lineColor: '#FFFFFF'
},
tooltip: {
valueDecimals: 2
}
}]
});
});
So I'm wondering if it's a bug with the new updated highstock.js code.
Related
The example Data grouping by buttons from the Highcharts API: https://api.highcharts.com/highstock/rangeSelector.buttons
has a custom data grouping set through the rangeSelector->buttons->dataGrouping
rangeSelector: {
allButtonsEnabled: true,
buttons: [{
type: 'month',
count: 3,
text: 'Day',
dataGrouping: {
forced: true,
units: [['day', [1]]]
}
}, {
type: 'year',
count: 1,
text: 'Week',
dataGrouping: {
forced: true,
units: [['week', [1]]]
}
}, {
type: 'all',
text: 'Month',
dataGrouping: {
forced: true,
units: [['month', [1]]]
}
}],
},
Unfortunately the data grouping is dropped when visible data is changed in the navigator (the selected Weekly data grouping is changed to Daily grouping is used)
The same happens when the date range is changed through the calendar (rangeSelector->input).
Is there a way to keep the data grouping after changing date range in navigator or calendar?
Set in buttons options buttons.preserveDataGrouping to true.
When buttons apply dataGrouping on a series, by default zooming in/out will deselect buttons and unset dataGrouping. Enable this option to keeps buttons selected when extremes change.
buttons: [{
type: 'month',
count: 3,
text: 'Day',
preserveDataGrouping: true,
dataGrouping: {
forced: true,
units: [
['day', [1]]
]
}
}, {
type: 'year',
count: 1,
text: 'Week',
preserveDataGrouping: true,
dataGrouping: {
forced: true,
units: [
['week', [1]]
]
}
}, {
type: 'all',
text: 'Month',
preserveDataGrouping: true,
dataGrouping: {
forced: true,
units: [
['month', [1]]
]
}
}],
Demo: https://jsfiddle.net/BlackLabel/2nm1qtLy/
I am not able to set the color in tree map based on a value. value is coming dynamically from api response. Here is how I am trying to achieve same but id is not working. It is a drilldown tree map.if anyone can help me. I want to set the colors as per the colorvalue.
function treeMap(containerID, jsonData, titleText, subTitleText, type, colorValue) {
Highcharts.AST.allowedAttributes.push('onmousedown')
treeChart = Highcharts.chart(containerID, {
colorAxis: {
minColor: Highcharts.getOptions().colors[9],
maxColor: '#FFFFFF',
},
plotOptions: {
series: {
turboThreshold: 10000
}
},
series: [{
type: "treemap",
allowDrillToNode: true,
layoutAlgorithm: 'squarified',
dataLabels: {
enabled: false
},
levelIsConstant: false,
levels: [{
level: 1,
dataLabels: {
enabled: true
},
borderWidth: 3
}],
name: titleText,
data: jsonData[0].concat(jsonData[1]),
colorKey:colorValue
}],
tooltip: {
useHTML: true,
style: {
pointerEvents: 'auto'
},
stickOnContact: true,
pointFormatter: function() {
return chartToolTip(this, type);
}
},
title: {
text: titleText
},
subtitle: {
text: subTitleText
}
});
}
As API says, series.colorKey is a string that determinates what data value should be used to calculate point color. Whereas colorValue should be passed with data. I hope the following, simplified example will clarify it:
Example code:
let colorValue = [1, 5, 10];
Highcharts.chart('container', {
colorAxis: {
minColor: '#FFF000',
maxColor: '#0000FF'
},
series: [{
type: 'treemap',
colorKey: 'colorValue',
data: [{
value: 4,
colorValue: colorValue[0]
}, {
value: 3,
colorValue: colorValue[1]
}, {
value: 2,
colorValue: colorValue[1]
}, {
value: 1,
colorValue: colorValue[2]
}]
}]
});
API Reference:
https://api.highcharts.com/highcharts/plotOptions.treemap.colorKey
Demo:
https://jsfiddle.net/BlackLabel/wa4h0cgk/
So the problem is that my last two columns merge together into one. In this case i have as wel values of 9 as of 10 in my array but it just adds the number of 9's and 10's together and labels them all as 9 in the histogram. The result is shown in the picture histogram. You can find my code here https://jsfiddle.net/vlovlo/ypv1jg3u/5/
let testArray = [0,0,0,1,1,1,1,1,2,2,3,3,4,4,4,4,5,5,6,6,6,6,7,7,7,8,8,8,8,8,9,9,9,10,10,10,10]
Highcharts.chart('test', {
title: {
text: 'test',
margin: 50,
style:{
fontWeight: "bold",
},
},
xAxis: [{
visible: false,
}, {
title: {
text: 'test x',
style:{
fontWeight: "bold",
},
},
showLastLabel: true,
}],
yAxis: [{
visible: false
}, {
title: {
text: 'test x',
style:{
fontWeight: "bold",
},
},
}],
plotOptions: {
series: {
borderWidth: 0,
pointPlacement: 'between',
dataLabels: {
enabled: true
},
},
histogram: {
binWidth: 1
}
},
series: [{
name: 'Test',
type: 'histogram',
yaxis: 1,
xAxis: 1,
baseSeries: 'testSeries'
},
{
id: 'testSeries',
visible: false,
data: testArray
}]
});
Try to set the binWidth as 0.99
Demo: https://jsfiddle.net/BlackLabel/doqgcy0z/
If you group by day only the first series is grouped. How can I make it so it groups both series?
In the above example, both series have the same data, but my current situation consists of two series with the same x value in every point but different y values.
Example: http://jsfiddle.net/6751x0yj/1/
$('#container').highcharts('StockChart', {
rangeSelector : {
allButtonsEnabled: true,
buttons: [{
type: 'month',
count: 3,
text: 'Day',
dataGrouping: {
forced: true,
units: [['day', [1]]]
}
}, {
type: 'year',
count: 1,
text: 'Week',
dataGrouping: {
forced: true,
units: [['week', [1]]]
}
}, {
type: 'all',
text: 'Month',
dataGrouping: {
forced: true,
units: [['month', [1]]]
}
}],
buttonTheme: {
width: 60
},
selected: 2
},
title : {
text : 'AAPL Stock Price'
},
subtitle: {
text: 'Custom data grouping tied to range selector'
},
series : [{
name : 'Series 1',
data : data,
marker: {
enabled: null, // auto
radius: 3,
lineWidth: 1,
lineColor: '#FFFFFF'
},
tooltip: {
valueDecimals: 2
}
},{
name : 'Series 2',
data : data,
marker: {
enabled: null, // auto
radius: 3,
lineWidth: 1,
lineColor: '#FFFFFF'
},
tooltip: {
valueDecimals: 2
}
}]
});
Thanks!
Looks like a bug, which you already reported here.
Workaround is to update series in descending order:
var H = Highcharts;
H.wrap(H.Axis.prototype, "setDataGrouping", function (p, dg, r) {
if (!dg) {
dg = {
forced: false,
units: null
};
}
if (this instanceof H.Axis) {
for(var i = this.series.length - 1; i >= 0; i--) {
this.series[i].update({
dataGrouping: dg
}, false);
};
}
p.call(this, dg, r);
});
And demo: http://jsfiddle.net/6751x0yj/2/
When selecting the "All"-range in a HighStock chart with technical indicators then
the stock price (AAPL stock price) is not listed (most of the time, sometimes it appears) in the tooltip.
Open the sample chart here: http://jsfiddle.net/laff/SRfW6/
Hover over the chart and notice that the stock price is listed in the tooltip.
Click on the 'All' range selection.
Hover over the chart and notice that the stock price is no longer listed most of the time in the tooltip.
Has anybody an idea what the problem might be?
This the code from the example:
$.getJSON('http://www.highcharts.com/samples/data/jsonp.php?filename=aapl-c.json&callback=?', function(data) {
$(function() {
$('#container').highcharts('StockChart', {
title : {
text : 'MACD of AAPL stock price'
},
subtitle: {
text: 'From may 15, 2006 to May 10, 2013'
},
yAxis: [{
title: {
text: 'Price'
},
height: 200,
plotLines: [{
value: 0,
width: 1,
color: '#808080'
}]
}, {
title: {
text: 'MACD'
},
top: 300,
height: 100,
offset: 0,
lineWidth: 2
}],
tooltip: {
crosshairs: true,
shared: true
},
rangeSelector : {
selected : 1
},
legend: {
enabled: true,
layout: 'vertical',
align: 'right',
verticalAlign: 'middle',
borderWidth: 0
},
plotOptions: {
series: {
marker: {
enabled: false,
}
}
},
series : [{
name: 'AAPL Stock Price',
type : 'line',
id: 'primary',
data : data
}, {
name : 'MACD',
linkedTo: 'primary',
yAxis: 1,
showInLegend: true,
type: 'trendline',
algorithm: 'MACD'
}, {
name : 'Signal line',
linkedTo: 'primary',
yAxis: 1,
showInLegend: true,
type: 'trendline',
algorithm: 'signalLine'
}, {
name: 'Histogram',
linkedTo: 'primary',
yAxis: 1,
showInLegend: true,
type: 'histogram'
}]
});
});
});
Just adding this code to plotOptions.series seems to fix it (JSFiddle demonstration):
dataGrouping: { }
It appears that given your original code dataGrouping was somehow null.
I'll be honest. I don't know why. Looks borderline buggy.