Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 7 years ago.
Improve this question
I have to create a chart with stacked bars, and I reached a problem: when I disable a particular serie (by clicking it in the legend), the stacks on the right change places with the ones on the left.
As a demo means more than a long explanation, there is a jsfiddle: http://jsfiddle.net/69gep9rt/
To reproduce the switch, simply click on "Banana (Male)" in the legend.
I have no idea what causes this behavior, and since the Y-Axis are fixed, I need to keep males on the left and females on the right.
A solution and/or an explanation could be very helpful.
I think the issue with your code is linked to x axis' indexes.
You should group the males and the females under the same x index. For example, all males with index equals to 0 and all females equals to 1.
Another solution is to use a growing index with all males first and then all the females.
series: [
{
name: "Banana (Male)",
data: [29,13,16,54,21,2],
stack: "Male",
id: "Banana",
code: "BAN",
yAxis: 0,
index: 0, // all Male have index = 0
legendIndex: 2,
color: "rgba(0,169,224,1)"
},
{
name: "Banana (Female)",
data: [1305,680,720,2520,945,90],
stack: "Female",
id: "Banana",
code: "BAN",
yAxis: 1,
index: 1, // all Female have index = 1
legendIndex: 2,
color: "rgba(0,169,224,0.8)"
},
{
name: "Apple (Male)",
data: [266,235,150,215,213,17],
stack: "Male",
id: "Apple",
code: "APL",
yAxis: 0,
index: 0,
legendIndex: 1,
color: "rgba(206,0,88,1)"
},
{
name: "Apple (Female)",
data: [14045,11690,7280,10667.64,10345,765],
stack: "Female",
id: "Apple",
code: "APL",
yAxis: 1,
index: 1,
legendIndex: 1,
color: "rgba(206,0,88,0.8)"
},
{
name: "Tomato (Male)",
data: [11293,10300,7975,10703,10934,868],
stack: "Male",
id: "Tomato",
code: "TOM",
yAxis: 0,
index: 0,
legendIndex: 0,
color: "rgba(130,70,175,1)"
},
{
name: "Tomato (Female)",
data: [221800,200210,156990,209080,211945,15675],
stack: "Female",
id: "Tomato",
code: "TOM",
yAxis: 1,
index: 1,
legendIndex: 0,
color: "rgba(130,70,175,0.8)"
}
]
Here the jsFiddle for solution one: http://jsfiddle.net/69gep9rt/2/
Ciao
Davide
Related
I have a chart with two yaxis but can't get the second data series to scale to the second axis. What am I missing?
Example: https://jsfiddle.net/32yugp6m/2/
Now I see where the problem is. You have set the series.yaxis to 1 and 2, meanwhile, it needs to be set as series.yAxis 0 and 1. Notice that Axis must be started with capital letter.
Demo: https://jsfiddle.net/BlackLabel/8u2rhegv/
series: [{
name: 'Deg F.',
type: 'line',
yAxis: 0,
data: [
[Date.UTC(2020, 1, 22, 12, 2), 70.8],
[Date.UTC(2020, 1, 22, 12, 1), 70.8],
...
],
},
{
name: 'RH',
type: 'line',
yAxis: 1,
data: [
[Date.UTC(2020, 1, 22, 12, 2), 33.4],
[Date.UTC(2020, 1, 22, 12, 1), 33.4],
...
],
}
]
API: https://api.highcharts.com/highcharts/series.line.yAxis
I am tired of one issue which I faced with few days ago and still do not solve it. I have a Highstock chart with two series:
{
rangeSelector: {
buttons: [{
type: 'day',
count: 1,
text: '1d'
}, {
type: 'week',
count: 1,
text: '1W'
}, {
type: 'month',
count: 1,
text: '1M'
}, {
type: 'all',
count: 1,
text: 'All'
}],
selected: 1,
inputEnabled: false
},
legend: {
useHTML: Highstock.hasBidiBug
},
series: [
{
name: 'MAX',
data: this.chartData.maxValuesArr
},
{
name: 'MIN',
data: this.chartData.minValuesArr
}]
}
As you can see I use range for a one week by default, I got from BE array with 1600 values since 2014 year and it scales good and shows me the last week by default, but, also I have prices updates every 30(more/less) seconds, I have tried a lot of ways to add those values in such way that dont break the scale of the chart! On the picture you can see that 18 of jule is bigger than other days and all it became like that because I added updated point to it.
The question is how can I add(update) chart dynamically and dont break the scale. For range I use buttons(see config) thats why I cannot use chart.setExtremes()
I ll be very thankful!
I am trying to plot column + line chart combined using Highcharts.
Similar to this example: http://jsfiddle.net/gh/get/jquery/1.9.1/highslide-software/highcharts.com/tree/master/samples/highcharts/demo/combo/
but, I wanted to plot the line points per bar instead of per xAxis label. Not sure if this is even doable?
I tried to give it a shot but no success!
https://jsfiddle.net/e5e6bcfL/6/
Here is the xAxis categories and series data:
xAxis: {
categories: ['John', 'Ginni', 'Vicki', 'Alan', 'Alic']
}
...
series: [{
name: 'Male',
data: [10, 1, 8, 7, null]
}, {
name: 'Female',
data: [null, 12, 9, 2, 7]
},
{
yAxis: 1,
name: 'avgAge',
type: 'spline',
// this data is per xAxis category and per name/legend
// eg John Male avgAge is 35, Ginni Female avgAge is 30
data: [35, 18, 30, 28, 26, 32, 25, 36]
}]
Any help is appreciated.
As the title states, highcharts is only loading the title and subtitle, yet none of the subsequent chart information or it's relevant theme. Hitting my head against a wall trying to get this to work. Really hoping someone else here has had this problem.
jsfidizzle
The first half of the fiddle is the highcharts theme. All the logic starts kicking off at #transitfunding
Very simple fix... you need to move your series data outside of your plotOptions: like so:
plotOptions: {
column: {
stacking: 'normal'
},
},
series: [{
name: 'Other',
data: [0, 0, -5400000, 1, 1, 0, 3, 0, 8016805, -8435419, -28900000]
}, {
name: 'Gas Tax',
data: [119221, 627705, 234646, 6685080, 1341871, 1990937, 3187208, 6911715, 10002605, -14282137, -10555715 ]
}]
A working fiddle can be seen here.
you have misplace the series section.
series(that contains data) is the sibling of plotOptions not its child.
so it should be like
plotOptions: {
column: {
stacking: 'normal'
},
},
series: [{
name: 'Other',
data: [0, 0, -5400000, 1, 1, 0, 3, 0, 8016805, -8435419, -28900000]
}, {
name: 'Gas Tax',
data: [119221, 627705, 234646, 6685080, 1341871, 1990937, 3187208, 6911715, 10002605, -14282137, -10555715 ]
}]
I've updated your js fiddle here
I'm having a problem getting Highcharts Column Range charts with multiple data series to display as I would like. Please refer to http://jsfiddle.net/jbreadner/6qsvjark/1/
There are two charts shown here, the "Top Chart" and "Bottom Chart".
The top chart uses multiple data series effectively, as seen both in code and also with the "Task 1" and "Task 2" entries in the legend. The problem with this chart is that the Task 1 and Task 2 bars are offset from each other vertically.
series: [{
name: 'Task 1',
stack: 'Tasks',
data: [{
x: 0,
low: 7,
high: 8
}, {
x: 1,
low: 6.5,
high: 7.5
}]
}, {
name: 'Task 2',
stack: 'Tasks',
data: [{
x: 0,
low: 8,
high: 9
}, {
x: 1,
low: 7.5,
high: 8.5
}]
}]
The bottom chart displays the column range chart as I would like to see, but it forces a color for every data point, and in using one data series it breaks the legend functionality. This results in uglier code with reduced functionality.
series: [{
name: 'Data',
data: [{
x: 0,
low: 7,
high: 8
},{
x: 0,
low: 8,
high: 9,
color: "#202020"
},{
x: 1,
low: 6.5,
high: 7.5
},{
x: 1,
low: 7.5,
high: 8.5,
color: "#202020"
}]
}]
Is there any way to modify the top chart's configuration so it retains multiple data sets, but visually looks like the bottom chart?
Column charts have a "stack" property, but this doesn't appear to work with the chart range type. The "stack" option is included in the top chart.
just add :
plotOptions: {
columnrange: {
grouping: false
}
}
to your chart. http://jsfiddle.net/6qsvjark/2/