The scenario is represented in the fiddle below. I am using a column chart to represent the data. When there is multiple data only the highest is being displayed in the graph. I am expecting it to stack.
http://jsfiddle.net/7pccz1j4/
$(function () {
$('#container').highcharts({
chart: {
type: 'column'
},
xAxis: {
type: 'datetime',
},
yAxis: {
min: 0,
minTickInterval: 1
},
series: [{
name: 'series1',
data: [
[1418075700000, 2],
[1418076000000, 2],
[1418076300000, 2],
[1418076600000, 2],
[1418076900000, 2],
[1418077200000, 2],
[1418077500000, 2],
[1418077800000, 2],
[1418078100000, 2],
[1418078100000, 3],
[1418078400000, 2],
[1418078700000, 2],
[1418079000000, 2]
]
}]
});
});
The same scenario with a line chart is this fiddle.
http://jsfiddle.net/RKVgx/253/
You need to set stacking option like in the example: http://jsfiddle.net/7pccz1j4/2/
plotOptions:{
series:{
stacking:'normal'
}
},
Related
I am using a scatter diagram with apexcharts like this: https://apexcharts.com/javascript-chart-demos/scatter-charts/basic/.
My problem is that if there is two or more datapoints with the exact same value, they will be stacked above eachother and therefore only one is shown and the other ones are completely hidden (not shown on hover either).
Is there any function to make them all viewable even if they have the same value? Maybe some sort of offset if more of the same value or some tooltip showing number of layers or something?
Code:
var options = {
series: [{
name: "Data A",
data: [
[16, 5], [16, 5, [16, 5], [15, 2], [14, 1], [14, 4]]
},{
name: "Data B",
data: [
[16, 5], [14, 1], [14, 4], [12, 11]]
},
chart: {
height: 350,
type: 'scatter',
zoom: {
enabled: true,
type: 'xy'
}
},
xaxis: {
tickAmount: 10,
labels: {
formatter: function(val) {
return parseFloat(val).toFixed(1)
}
}
},
yaxis: {
tickAmount: 7
}
};
var chart = new ApexCharts(document.querySelector("#chart"), options);
chart.render();
I'm trying to combine stacked bars and a line chart in one flot plot.
The problem I'm facing is, that the line data also gets stacked. Which means the data for the first point (line.data[0]) will be plotted as 15 but I would like it to be 5.
Please see this jsfiddle: http://jsfiddle.net/derkinzi/eor5ngjd/
It works when setting stack: null but I need the stacks. Also giving the line it's own yaxis doesn't solve the problem. (change line 90 to: yaxis: 2)
How can I amend the code so line.data get's it's independent plotting with an independent yaxis?
Basically I need this but with stacked bars: http://jsfiddle.net/derkinzi/eor5ngjd/11/
This is my dataset:
var stack1 = {
label: 'stack1',
data: [
[1, 6],
[2, 3],
[4, 5],
[4, 3],
[5, 4]
],
bars: bar_options
};
var stack2 = {
label: 'stack2',
data: [
[1, 4],
[2, 4],
[3, 4],
[4, 4],
[5, 4]
],
bars: bar_options
};
var line = {
label: 'line',
data: [
[1, 5],
[2, 15],
[3, 15],
[4, 15],
[5, 20]
],
lines: line_options,
yaxis: 1,
points: {
radius: 5,
show: true
},
};
var dataset = [stack1, stack2, line];
As describes in the stack plugin, you can specify the stack option per data series, so in your case do this:
var stack1 = {
//...
stack: true,
};
var stack2 = {
//...
stack: true,
};
var line = {
//...
stack: false,
//...
};
Also, when you define multiple axes, use the yaxes property, not yaxis.
Updated fiddle
I am not sure if this is a bug. Take the case of multi series drill down. After a legend item has been clicked, the series for the item is hidden and then we drill down. From here, if one drills up then it should go to last active state, i.e. multi series but with one series hidden. Instead of going to last active state, drill up goes to initial series data.
To reproduce, please goto this fiddle. Reproducible steps below the code.
$(function () {
// Create the chart
$('#container').highcharts({
chart: {
type: 'column'
},
title: {
text: 'Highcharts multi-series drilldown'
},
subtitle: {
text: 'Click columns to drill down to single series. Click categories to drill down both.'
},
xAxis: {
type: 'category'
},
plotOptions: {
series: {
borderWidth: 0,
dataLabels: {
enabled: true
}
}
},
series: [{
name: '2010',
data: [{
name: 'Republican',
y: 5,
drilldown: 'republican-2010'
}, {
name: 'Democrats',
y: 2,
drilldown: 'democrats-2010'
}, {
name: 'Other',
y: 4,
drilldown: 'other-2010'
}]
}, {
name: '2014',
data: [{
name: 'Republican',
y: 4,
drilldown: 'republican-2014'
}, {
name: 'Democrats',
y: 4,
drilldown: 'democrats-2014'
}, {
name: 'Other',
y: 4,
drilldown: 'other-2014'
}]
}],
drilldown: {
series: [{
id: 'republican-2010',
data: [
['East', 4],
['West', 2],
['North', 1],
['South', 4]
]
}, {
id: 'democrats-2010',
data: [
['East', 6],
['West', 2],
['North', 2],
['South', 4]
]
}, {
id: 'other-2010',
data: [
['East', 2],
['West', 7],
['North', 3],
['South', 2]
]
}, {
id: 'republican-2014',
data: [
['East', 2],
['West', 4],
['North', 1],
['South', 7]
]
}, {
id: 'democrats-2014',
data: [
['East', 4],
['West', 2],
['North', 5],
['South', 3]
]
}, {
id: 'other-2014',
data: [
['East', 7],
['West', 8],
['North', 2],
['South', 2]
]
}]
}
});
});
Click on any legend item, say '2010'. It will hide the corresponding columns.
Drill down any xAxis category, say 'Republicans'. This will only show the chart for Republicans across for directions.
Click drillUpButton (Back to 2014). This will show the chart for both 2010 and 2014. Instead it should have shown only for 2014.
In my jsfiddle, example I've got two instances of the same chart. Each has two series of data - one common to both with the same max and min and the other different but with values wholey within the extents of the first series. What i'm expecting is to see the two graphs to the same scale. What I get is the first shrunk to the middle of the graph range and the second full width.
I've tried all sorts - setting the max and min etc, but really, I don't understand what the issue is so i'm having trouble figuring out what to do about it
Can anyone tell me what's going one - why don't they scale the same and what can I do to force them to? I've added some buttons to print the extremes and they report as being the same. I've tried setting min and max on the series to the min and max values from my data - but to no avail.
var gc2 = [
[1421680291000, 5],
[1421690785000, 5],
[1421713693000, 1],
[1421746462000, 6],
[1421747928000, 6],
[1421754240000, 6],
[1421775733000, 6],
[1421782226000, 6],
[1421798460000, 6],
[1421884860000, 3],
[1421971260000, 6],
[1422057660000, 6],
[1422144060000, 6],
[1422230460000, 6],
[1422268738000, 3],
[1422273729000, 1],
[1422316860000, 1],
[1422663082000, 5],
[1422748860000, 6],
[1422835260000, 3],
[1422921660000, 6],
[1423180860000, 3],
[1423267260000, 5],
[1423353660000, 3],
[1423440060000, 5],
[1423872060000, 5],
[1423958460000, 5]
];
var bad = [
[1421971260000, 1],
[1422057660000, 1],
[1422144060000, 1],
[1422230460000, 1],
[1422268738000, 1],
[1422748860000, 1]
];
var good = [
[1421746462000, 1],
[1421747928000, 1],
[1421754240000, 1],
[1421775733000, 1],
[1421782226000, 1],
[1421798460000, 1]
];
$(document).ready(function () {
checkOrder(gc2);
checkOrder(good);
checkOrder(bad);
});
function checkOrder(series) {
var xlow = 0;
for (var i = 0; i < series.length; i++) {
if (series[i][0] < xlow) {
console.log("out of order");
} else {
xlow = series[i][0];
}
}
}
$(function () {
$('#container1').highcharts('StockChart', {
chart: {
defaultSeriesType: 'column',
backgroundColor: 'transparent'
},
rangeSelector: {
selected: 1
},
title: {
text: 'not working'
},
xAxis: {
type:'datetime'
},
yAxis: {
min: 0,
max: 10
},
series: [{
name: 'x1',
data: gc2,
tooltip: {
valueDecimals: 2
}
}, {
name: 'x2',
data: bad,
tooltip: {
valueDecimals: 2
}
}]
});
});
$(function () {
$('#container2').highcharts('StockChart', {
chart: {
defaultSeriesType: 'column',
backgroundColor: 'transparent'
},
rangeSelector: {
selected: 1
},
title: {
text: 'working'
},
xAxis: {
type:'datetime'
},
yAxis: {
min: 0,
max: 10
},
series: [{
name: 'x1',
data: gc2,
tooltip: {
valueDecimals: 2
}
}, {
name: 'x',
data: good,
tooltip: {
valueDecimals: 2
}
}]
});
});
trying to figure out how to display this highcharts example with data categories of name (john, jane, joe) without changing how the data is supplied
$(function ()
{
$('#container').highcharts({
chart: {
type: 'bar'
},
title: {
text: 'Stacked bar chart'
},
xAxis: {
categories: ['Apples', 'Oranges', 'Pears', 'Grapes', 'Bananas']
},
yAxis: {
min: 0,
title: {
text: 'Total fruit consumption'
}
},
legend: {
backgroundColor: '#FFFFFF',
reversed: true
},
plotOptions: {
series: {
stacking: 'normal'
}
},
series: [{
name: 'John',
data: [5, 3, 4, 7, 2]
}, {
name: 'Jane',
data: [2, 2, 3, 2, 1]
}, {
name: 'Joe',
data: [3, 4, 4, 2, 5]
}]
});
});`
http://jsfiddle.net/zAMCK/
Basically, I want to supply the category of data together. Is this possible? Also would like to supply multiple different fruits per person, which may be unique per person
You can set for each value specific x category index, demo: http://jsfiddle.net/zAMCK/1/
series: [{
name: 'John',
data: [[0, 2], [3, 5], [4, 1]]
}, {
name: 'Jane',
data: [[1, 3], [1, 5], [1, 3]] //not supported duplicate x-values
}, {
name: 'Joe',
data: [[0, 1], [2, 5], [4, 1]]
}]