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/
Related
I would like to add columns inside the area of chart red for negative and green for positive like attaching screenshot.
https://prnt.sc/psk7ge
You need to create a chart with area and column series. The set the colors, use negativeColor and color options:
series: [{
type: 'area',
data: [10, 20, 10, 20, 10],
threshold: -20
}, {
type: 'column',
data: [-10, 10, -15, 10, 15],
color: 'green',
negativeColor: 'red'
}]
Live demo: http://jsfiddle.net/BlackLabel/owh16dzL/
API Reference: https://api.highcharts.com/highcharts/series.column.negativeColor
I need to hide the last point in a serie but have to keep the label. Seems is only possible to set a pointWidth but not a pointHeight. How can i force to display the label and hide the column bar for the last point?
series: [
{
type: 'column',
data: [1, 2, 1, 2, 3, { pointWidth: 0, y: 5 }]
}
]
Here's a demo of the current/expected behavior
Thanks
You could set the color of the last column to transparent:
series: [{
data: [3,5,7,4,{y:5,color: 'transparent'}]
}]
Example:
http://jsfiddle.net/jlbriggs/7o2hafuy/
With dataLabels Api Doc that's possible
series: [{
type: 'column',
dataLabels:{
enabled:true
},
data: [1, 2, 1, 2, 3, {
pointWidth: 0,
y: 5
}]
}]
Fiddle
I would like to display answers of type "yes/no/don't know". I was thinking about something similair to Bar with negative stack, but with "don't know" as a neutral part in the middle with equal width on both sides of zero. To show what I mean I added two neutral series to the standard fiddle. How can I merge them into one neutral series in the middle?
{
name: 'Neutral',
data: [...]
}
Maybe I'm on the completely wrong track. Any suggestions?
modified Bar with negative stack-fiddle
You might be able to do this with columnrange series that is inverted (to look like bar chart). This does require the highcharts-more.js library as well.
You need to set the index for each question (x), the low value (low), the high value (high), and then the color you would want (color).
Highcharts.chart('container', {
chart: {
type: 'columnrange',
inverted: true
},
xAxis: {
categories: ['Q1', 'Q2']
},
legend: {
enabled: false
},
series: [{
name: 'Answers',
data: [
// Question 1
{
x: 0,
low: -10,
high: -5,
color: 'red'
}, {
x: 0,
low: -5,
high: 5,
color: 'blue'
}, {
x: 0,
low: 5,
high: 10,
color: 'green'
},
// Question 2
{
x: 1,
low: -15,
high: -2,
color: 'red'
}, {
x: 1,
low: -2,
high: 8,
color: 'blue'
}, {
x: 1,
low: 8,
high: 20,
color: 'green'
}
]
}]
});
Sample jsFiddle.
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