One Average Spline for each Column in Highcharts Combination Chart - highcharts

i am quite new to Highcharts and i am a little bit stucked.
I am trying to add a average line (spline) to each bar (column) in a combination chart. The average line shall not be displayed in the middle, it sall be displayed over the related bar, as i tried to show in this picture.
picture to explain
Thanks a lot!

You can add new xAxis that you can use to add your spline series in right places.
xAxis: [{
min: 0,
max: 3,
categories: ['Jan', 'Feb', 'Mar', 'Apr'],
tickPixelInterval: 0
}, {
categories: true,
min: 0,
max: 19,
visible: false
}],
In this case I am making the second xAxis much more dense. Here you can see how both of my axes looks here:
http://jsfiddle.net/feqq1eog/1/
To hide second axis you can use visible: false parameter.
Here you can find an example how it can work:
http://jsfiddle.net/feqq1eog/4/

Related

add axis behind stacked column

I have here https://jsfiddle.net/ezhp5a4j/6/ an area and a stacked bar chart But I need to achieve something like : adding another series:column behind this actual but not stacked, starting from jan. 2010 and end dec. 2010 with a certain position in y axis, my need is quiet simple, but I don't know how achieve, I think I need another X axis ?
Actually I have:
xAxis: {
type: 'datetime',
ordinal: false
},
Maybe I need add array to this or so?
You could do this with a second axis, but it's not necessary.
If you add your new data series, with some additional parameters to control the size and spacing, it can all use the same x axis.
Example:
{
"name": 'Summary',
type: 'column',
grouping: false, <-- make sure they don't group with the other series
stacking: false, <-- make sure they don't stack on the other series
color: 'rgba(0,0,0,0.5)',
pointRange: 86400000 * 365, , <-- 1 year; set to desired time frame
pointInterval: 86400000 * 365, <-- 1 year; set to desired time frame
pointPadding: 0.01,
groupPadding: 0,
data: [10000, 15000, 9000, 13000]
}
Updated fiddle:
https://jsfiddle.net/jlbriggs/ezhp5a4j/15/
Output:
EDIT for comment:
To add a second axis, you change the xAxis object to an array of objects, like this:
xAxis: [{
type: 'datetime',
ordinal: false
},{
linkedTo: 0,
type: 'datetime',
ordinal: false
}]
If they are going to have different scales, I am not sure that it makes any sense to plot them together, but in that case, you would remove the linkedTo: 0
Then, in your data, you need to specify which data series are plotted on the second axis, by adding xAxis: 1 to the series options (you don't need to specify xAxis: 0 for the other series, as 0 is the default.
Since you have specified a pointStart in your plotOptions, if the series plotted on the second axis will have a different scale, you will need to specify a separate pointStart in that series options.
Update example fiddle:
https://jsfiddle.net/jlbriggs/ezhp5a4j/16/

Highcharts x axis dates displayed slanting

Im using Highcharts to generate a line chart. On my x-axis, I use dates and its all displaying but for some reason its displaying slanting.
How can I fix it? Here is my x-axis properties.
xAxis: {
categories: report_2_weekly_categories,
tickInterval: 180,
labels:{
format : '{value} CST'
}
},

How to create chart with highchart in which bar doesn't start from 0 in y axis?

I'm working with this chart, and the thing I'm trying to create is that for example "Apples" bar does not start from 0 on y axis. Instead of that, I want it to start from from example 25%, and to end in 75% (so that bar in chart (its height) is from 25 to 75, when you look at values in y-axis). Does anyone have an idea of how to do that? What to change?
You can use the column range chart type. See this official demonstration.
Here is a sample of your apples (JSFiddle):
$('#container').highcharts({
chart: {
type: 'columnrange'
},
xAxis: {
categories: ['Apples']
},
yAxis: [{
min: 0,
max: 100
}],
series: [{
data: [
[25, 75],
]
}]
});

Highcharts: bar/column chart label position with values of 0

If I have a Highcharts bar or column chart that has a data series with an array of all zeroes, the y axis tick label displays in the center of the y axis, along with an extra y axis. I've experimented with the tick placement and min values but these dont seem to work in the case of this peculiar set of data. see http://jsfiddle.net/davidpmcintyre/mepd17tn/
Here's the highcharts code snippet:
$(function () {
$('#container').highcharts({
chart: {
type: 'bar'
},
xAxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr' ]
},
series: [{
data: [0, 0, 0, 0]
}]
});
});
Assuming (given requirements of your chart):
All data will be positive
You always want to start from 0 on the y-axis
The following code will allow you to left-align your y-axis, and also specify how much of the y-axis you want to show in minimal cases (JSFiddle):
yAxis: {
min: 0,
minRange: 1
}
This will still allow you to have larger ranges on the y-axis as it only kicks in when the value range is less than one. This in turn means you do not have to check your data before setting any values.

Highcharts 3 tickPosition 'inside' not working

I wanted to have the tick labels inside the chart and I found the API for it but I can't get it to work.
Here is the fiddle
Is there anything I am missing here?
You should set negative y parameter:
http://jsfiddle.net/aFsAb/
xAxis: {
tickPosition: 'inside',
labels:{
y:-10
}
},

Resources