Highcharts - is there a bug with stacked categories? - highcharts

I'm seeing strange behaviour in my column chart
http://jsfiddle.net/L7yd7wj5/7/
The bars are stretched over two categories and positioned incorrectly with the correct labels.
Can anyone shed some light on this issue?
The reason I'm using categories instead of datetime is that I wish for stacks to be shown side by side on the same date for in and out
$(function () {
$('#container').highcharts({
chart: {
type: "column"
},
xAxis: {
categories: ['Jan 2 2013', 'Jan 3 2013', 'Jan 4 2013', 'Jan 5 2013', 'Jan 6 2013', 'Jan 7 2013', 'Jan 8 2013']
},
yAxis: {
stackLabels: {
enabled: true,
formatter: function() {
if (this.total) {
return this.stack;
} else {
return null;
}
}
}
},
plotOptions: {
column: {
stacking: 'normal'
}
},
series: [
{
name: "Cinema",
stack: "out",
data: [[0,35]]
},
{
name: "Sweets",
stack: "out",
data: [[1,12], [6,23]]
},
{
name: "Games",
stack: "out",
data: [[4,11]]
},
{
name: "Job",
stack: "in",
data: [[6,52]]
}
]
});
});

If I understand the problem correctly, pointRange is what you need:
plotOptions: {
column: {
stacking: 'normal',
pointRange:1
}
}
example:
http://jsfiddle.net/jlbriggs/L7yd7wj5/8/
Keep in mind that since you have a grouped set up as well, there will be space for multiple bars in each category even if there is only one bar with data.

Related

Highcharts histogram drilldown: set options for drilldown + first and last column cut-off

I have a game with 3 difficulties and I show their averages in a first graph. Now I want to use drilldown to show a spread of the scores for each difficulty in a histogram. I managed to get this working but I have two problems. First of all I use update to change the setting for the drilldown graphs, but then these settings also change for the first graph and thus I was wondering what the better way would be to do this.
My other problem is that in my histogram the first and last column are cut in half and only half is shown, but I cant seem to find a way to solve this. I tried min- and maxPadding but this did not work.
chart of the tree difficulties
Histogram of one difficulty
https://jsfiddle.net/vlovlo/sng4jwv8/36/
Here is my code
Highcharts.chart('skippedPatients', {
chart: {
events: {
drilldown: function (e) {
this.update({
title: {text: "Skipped patient: " + e.point.name},
xAxis:{
title:{text: "Nr of skipped patients"},
tickmarkPlacement: 'on',
},
yAxis:{title:{text: "Nr of players"}},
plotOptions:{series:{pointPlacement: 'on'}},
});
if (!e.seriesOptions) {
var chart = this,
drilldowns = {
'Histogram: Easy': {
name: 'Easy',
type: 'histogram',
baseSeries: 'avgSkippedEasy'
},
'Easy': {
id: 'avgSkippedEasy',
visible: false,
type: 'column',
data: skippedPatientsList
}
},
series = [drilldowns['Histogram: ' + e.point.name], drilldowns[e.point.name]];
chart.addSingleSeriesAsDrilldown(e.point, series[0]);
chart.addSingleSeriesAsDrilldown(e.point, series[1]);
chart.applyDrilldown();
}
}
}
},
title: {
text: 'Skipped patients'
},
xAxis: {
type: 'category',
},
legend: {
enabled: false
},
plotOptions: {
series: {
borderWidth: 0,
dataLabels: {
enabled: true
},
},
histogram: {
binWidth: 1
}
},
series: [{
name: 'Averages per difficulty',
colorByPoint: true,
type: 'column',
data: [{
name: 'Easy',
y: 5,
drilldown: true
}, {
name: 'Moderate',
y: 2,
drilldown: true
}, {
name: 'Hard',
y: 4,
drilldown: true
}]
}],
drilldown: {
series: []
}
});
You should define your initial options as a variable and attach them again in the drillup callback due to you did a chart update with changed the initial options.
Demo: https://jsfiddle.net/BlackLabel/5d1atnh7/

highcharts simple moving average day, weekly, monthly

I want to use a button to make the candlestick visible by day, week, and month, but I want the moving average line to not change automatically (only the day moving average line).
_chart = new Highcharts.stockChart('container', {
rangeSelector: {
selected: 2
},
title: {
text: 'AAPL Stock Price'
},
legend: {
enabled: true
},
plotOptions: {
series: {
showInLegend: true
}
},
series: [{
type: 'ohlc',
id: 'aapl',
name: 'AAPL Stock Price',
data: data
}, {
type: 'sma',
linkedTo: 'aapl'
}, {
type: 'sma',
linkedTo: 'aapl',
params: {
period: 50
}
}]
});
});
change(function() {
var unit = $(this).val();
console.log(123123);
_chart.series.forEach(function(ser) {
ser.update({
dataGrouping: {
units: [ [unit, [1]] ]
}
}, false);
});
console.log(unit);
_chart.redraw(unit);
console.log(_chart);
});

I need to remove Y-axis labels on highcharts while keeping the data intact

I'm looking to correct some y-Axis issues. I'm looking to remove, or edit, the left and right axis-labels and keep the middle one. [the 0 - 2400 label and remove, or edit, the 0-72g and 0-2400m]
In doing so, I also want to keep all the data intact, however not the labels.
here's my JSFiddle. https://jsfiddle.net/codkare17/L7w67znv/5/
function createChart() {
Highcharts.setOptions({
lang: {
thousandsSep: ','
}
});
Highcharts.stockChart('container', {
rangeSelector: {
selected: 4
},
yAxis: [{
labels: {
min: 0,
max: 8000
},
title: {
text: "Price (USD)",
formatter: '${value}'
},
plotLines: [{
value: 0,
width: 2,
color: 'silver'
}]
}, {}, {}],
plotOptions: {
series: {
showInNavigator: false
}
},
tooltip: {
pointFormat: '<span style="color:{series.color}">{series.name}</span>: <b>{point.y}</b> <br/>',
valueDecimals: 2,
split: true
},
series: seriesOptions
});
}
$.getJSON('https://www.coincap.io/history/365day/BTC', function(json) {
console.log(json)
$.each(names, function(i, name) {
seriesOptions.push({
name: name,
data: json[name],
type: name === 'volume' ? 'column' : 'line',
yAxis: i
})
});
createChart()
});`
You can change yAxis' visible property to false: https://jsfiddle.net/kkulig/L7w67znv/6/

Highcharts visualizes chart data incorrectly after zooming or using the navigator

I'm using highstock with four yAxis. Every axis holds a series with more than 400 points. Initially the chart is correct but as soon as one does the slightest zoom or moves the navigator a little bit, the whole chart changes. Lines get connected where they shouldn't, the yAxis seems to be corrupted and data points are no longer respected.
Result: A chart showing totally wrong data.
This gets especially annoying when using an non ordinal xAxis, although it is not required for the bug to appear.
Expected view (without zooming or changed navigation):
After using the navigator points are connected, the yAxis changed unnecessary and the expected gaps are no longer visible:
The bug doesn't occurs with three axis or if all series are on one axis. It seems that it also depends on the height and width of the chart.
I have a JSFiddle for demonstration. Nothing special in this code. Mainly:
$(function () {
$('#container').highcharts('StockChart', {
chart: {
zoomType: 'xy'
},
xAxis: {
ordinal: false
},
yAxis: [{
labels: {
format: '{value}°C'
},
title: {
text: 'Temperature1'
}
}, {
title: {
text: 'Temperature2'
},
labels: {
format: '{value}°C'
}
}, {
title: {
text: 'Temperature3'
},
labels: {
format: '{value}°C'
}
}, {
title: {
text: 'Temperature4'
},
labels: {
format: '{value}°C'
}
}],
series: [{
name: 'Temp1',
type: 'line',
yAxis: 0,
data: [{ "x": 1472569504959, "y": 37.0000003625635 }, ...
}, {
name: 'Temp2',
type: 'line',
yAxis: 1,
data: [{ "x": 1472569504959, "y": 37.0000003625635 }, ...
}, {
name: 'Temp4',
type: 'line',
yAxis: 3,
data: [{ "x": 1472569504959, "y": 37.0000003625635 }, ...
}, {
name: 'Temp3',
type: 'line',
yAxis: 2,
data: [{ "x": 1472569504959, "y": 37.0000003625635 }, ...
}]
});
});
This appears to be a function of the dataGrouping options.
Disable dataGrouping and it seems to work fine.
Code:
plotOptions: {
series: {
dataGrouping: {
enabled: false
}
}
}
Updated fiddle:
http://jsfiddle.net/jlbriggs/ydqdd624/4/
Reference:
http://api.highcharts.com/highstock/plotOptions.series.dataGrouping
http://www.highcharts.com/docs/advanced-chart-features/data-grouping

Highcharts: Area chart: fill in space between 0 and first point

http://jsfiddle.net/gabrielesandoval/efHq7/
Is there a way to fill in the gap between the y-axis and the first point. The first point on my chart should be "25 years" and i would like the area between 0 and 25 to be filled in as well. Even if the tooltip doesn't work for that point, I would just like to visually show that the values between 0 and the first point.
I tried adding a point with a x value of zero but that didnt work. The only area charts I have seen where there is no gap between the two axis and the area are examples where the chart is inverted. Is there a proper way to do this?
Current Code:
$(function () {
$('#container').highcharts({
chart: {
type: 'areaspline'
},
title: {
text: 'Monthly Comparison'
},
subtitle: {
text: '1 vs 2'
},
xAxis: {
min: 0,
categories: [0, '25 years', '30 years', '35 years', '40 years', '45 years']
},
yAxis: {
labels: {
formatter: function() {
return '$' + this.value;
}
},
min: 0,
title: {
text: 'Cost'
}
},
tooltip: {
shared: true,
valuePrefix: '$'
},
credits: {
enabled: false
},
legend: {
enabled: false
},
plotOptions: {
area: {
lineWidth: 1,
marker: {
enabled: false
},
shadow: false,
states: {
hover: {
lineWidth: 1
}
}
}
},
series: [{
type: 'area',
name: 'series1',
data: [['',60],['25 years',60], ['30 years',60], ['35 years',60], ['40 years',60], ['45 years',60]]
}, {
type: 'area',
name: 'series2',
data: [['',90], ['25 years',100], ['30 years',175], ['35 years',300], ['40 years',400], ['45 years',400]]
}]
});
});
You should set minPadding/maxPadding as 0, but these parameters doesn't work with categories. So you need to use numeric xAxis, instead of categories.

Resources