Is it at all possible to be able to have a vertically stacked bar chart with negative values (using highcharts).
Like this:
http://jsfiddle.net/gh/get/jquery/1.9.1/highslide-software/highcharts.com/tree/master/samples/highcharts/demo/column-stacked/
series: [{
name: 'John',
data: [5, -3, 4, 7, 2]
}, {
name: 'Jane',
data: [2, 2, -31, 2, 1]
}, {
name: 'Joe',
data: [3, 4, 4, 2, 5]
}]
Unfortunately negative values don't register.
This seems to be a solution:
http://jsfiddle.net/gh/get/jquery/1.9.1/highslide-software/highcharts.com/tree/master/samples/highcharts/demo/bar-negative-stack/
But for visual reasons I need the bars to be vertical.
Any thoughts on a fix would be greatly appreciated!
Thanks,
Tom
I was trying to achieve the same results. Check this fiddle and let me know =]
I used:
chart: {
type: 'column'
},
plotOptions: {
series: {
stacking: 'normal'
}
}
jsfiddle for vertical stacked bars w negatives
EDIT: try changing the type to 'bar'. This will make the chart "columns" go horizontal =]
jsFiddle for horizontal stacked bars w negatives
The Highcharts demo code for a 'Stacked column' does not work for negative values for the simple reason that the y-axis range is limited in the example code. The answer lies in removing the min=0 argument from the yAxis options.
The yAxis options should read
yAxis: {
title: {
text: 'Total fruit consumption'
},
stackLabels: {
enabled: true,
style: {
fontWeight: 'bold',
color: (Highcharts.theme && Highcharts.theme.textColor) || 'gray'
}
}
}
With these options in place the example code for the 'Stacked Column' chart will display negative values correctly.
You can use stacked column and then set inverted parameter as true, then chart will be rotated.
Related
I would like to set my area range (the blue horizontal bar) only on the red bar (fidding the width of the red bar) but I cannot find a solution to do this. Plot band don't work because it's full width on x axis. Could you help me please ?
On this try I managed to set the area range (blue horizontal bar) but it created another entry on X axis ("1"), I want to keep only the first entry "Omburu" with the same disposition of yellow, orange and red bar. With additionnal horizontal blue bar on the red bar who is set between to values following "Puissance kW" scale.
The JSFiddle is here : https://jsfiddle.net/poloh11/1qzfgopy/11/
Thanks a lot
{
name: 'Range',
data: [
[1000, 1500],[1000, 1500]
],
type: 'arearange',
lineWidth: 0,
color: Highcharts.getOptions().colors[0],
fillOpacity: 0.3,
marker: {
enabled: false
},
yAxis: 1
}
Use columnrage series instead. It has common properties with column series (pointRange, pointPadding etc.) that allow to adjust it similarly. The following configuration works for me:
{
name: 'Range',
data: [
[1000, 1500]
],
type: 'columnrange',
lineWidth: 0,
color: 'rgba(149,206,255,0.7)',
marker: {
enabled: false
},
yAxis: 1,
pointPlacement: 0.3,
pointRange: 0.33,
borderWidth: 0
}
Live demo: https://jsfiddle.net/BlackLabel/9czvmhsx/
API reference: https://jsfiddle.net/BlackLabel/9czvmhsx/
I'm using Highcharts with hebrew names. When I have negative values, the tooltip display the minus sign (-) on the right side.
tooltip display
$(function () {
Highcharts.chart('container', {
chart: {
type: 'column'
},
title: {
text: 'Column chart with negative values'
},
xAxis: {
categories: ['Apples', 'Oranges', 'Pears', 'Grapes', 'Bananas']
},
credits: {
enabled: false
},
series: [{
name: 'שרה',
data: [5, 3, -4, 7, -2]
}, {
name: 'שי',
data: [2, -2, -3, 2, 1]
}]
});
});
jsfiddle
How to display it on the left side?
Thanks for your help.
check out this fiddle
http://jsfiddle.net/mooioom/upcq96k5/
A general useful tip for all numeral-direction-problems in RTL languages is to
apply direction:ltr and display:inline-block on the element which is wrapping the number.
in this specific case you also need to add tooltip : { useHTML:true } on the highcharts object in order for highcharts to render the tooltip using html (and not svg) ...
I am using HighCharts combination chart to compare a forecast value(indicated by line) and a cumulative value (indicated by column). The cumulative value keeps increasing weekly and I want to be able to see if it reaches the predicted forecast value.
I created a graph in this js fiddle, http://jsfiddle.net/aroauy4t/ .
I have shown the js code below.
$(function () {
$('#container').highcharts({
title: {
text: 'Forecast Vs Cumulative chart'
},
xAxis: {
categories: [' ', ' ', 'Bananas', ' ', ' ']
},
labels: {
items: [{
style: {
left: '50px',
top: '18px',
color: (Highcharts.theme && Highcharts.theme.textColor) || 'black'
}
}]
},
series: [{
type: 'column',
name: 'Cumulative',
data: [0, 0, 5, 0, 0]
}, {
type: 'line',
name: 'Forecast',
data: [3, 3, 3, 3, 3],
marker: {
lineWidth: 2,
lineColor: Highcharts.getOptions().colors[3],
fillColor: 'white'
}
}]
});
});
But the tooltip content overflows when the x axis doesn't contain a label like in the image shown below.
How can I get the tooltip to behave without any overflow (like in the image below)
You could also make use of tooltip - useHTML property.
When turned on the tooltip is rendered as excepted.
tooltip: {
useHTML: true
}
http://jsfiddle.net/aroauy4t/2/
I got it to work (I don't know HighCharts very well) by using the following in your js fiddle:
categories: ["\u00A0", "\u00A0", 'Bananas', "\u00A0", "\u00A0"]
00A0 is the unicode character for non-breaking space.
Maybe it will work for you.
Can you please take a look at This Demo and let me know how I can get rid of the Series 1" index!
and have actual index for the two columns or if not possible simply remove it from the chart?
I also didn't get the way that YAxis is adding Ticks to chart! Is there any way to specify the number of Ticks and Max, Min Values?
$(function () {
$('#container').highcharts({
chart: {
type: 'column'
},
xAxis: {
categories: ['Green', 'Pink']
},
series: [{
data: [{
name: 'Point 1',
color: '#00FF00',
y: 500
}, {
name: 'Point 2',
color: '#FF00FF',
y: 5
}]
}]
});
});
You can remove the legend by adding this object to the container (right after series)
legend: {
enabled: false
}
You can set the tick interval on the yAxis like so:
yAxis: {
tickInterval: 25
}
It's all documented here: http://api.highcharts.com/highcharts
I encourage you to read it and experiment with the examples in-line.
It looks like that column grafs don't support legend. If you want remove it just write under initialize
$(function () {
$('#container').highcharts({
....
....
....
});
$('.highcharts-legend').remove();
});
It should work. :)
I'm trying to create a chart using highcharts that includes both a column series and a scatter series with a custom point marker. The series will contain slightly different sets of data, but will overlap for the most part and will always have the same x-axis values.
I've set it up, but the problem is that it's not lining up perfectly. Some of the scatter series' points are shifted one or two pixels to the left of the corresponding bar.
Any ideas about how to fix this?
{
chart: {
animation: false
},
xAxis: {
tickInterval: 1
},
series: [{
type: "column",
borderWidth: 0,
pointWidth: 20,
name: "col"
},
{
type: "scatter",
states: { hover: { enabled: false } },
marker: { symbol: 'url(symbol.png)' }
}]
}
And here's a screenshot of what's happening:
Indeed it looks like a bug, also with standard markers, so I've decided to report it to our developers https://github.com/highslide-software/highcharts.com/issues/1843