When using a reversed line chart with min and max values, the line is partially hidden at the min value. The problem is that the drawing canvas ends exactly at the min value line. When you have a line that is thick only part of it is visible there, the part that is lying above the min value line is hidden. You can see an example here. I tried different options to fix this but havent been successful. Is there a way you can increase the chart canvas on top?
This is the highcharts code:
$("#chart").highcharts({
chart: {
type: "line",
spacingBottom: 30,
height: 400,
alignTicks: false,
},
credits: {
enabled: false
},
legend: {
enabled: false
},
title: {
text: "Chart"
},
yAxis: [{
title: null,
reversed: true,
showFirstLabel: true,
allowDecimals: false,
startOnTick: false,
endOnTick: false,
tickInterval: 5,
minorTickInterval: 1,
max: 10,
min: 1,
}],
series: [{
yAxis: 0,
data: [6,2,2,1,1,1,1,1,1,1,1,1,1,2,2,1,1,2,2,2,2,2],
lineWidth: 10,
marker: {
enabled: false
}
}]
});
The min: 0.9 works well unless you have tickPositions set as well without startOnTick set. If you are setting tickPositions, then look at adding startOnTick: false to the yAxis as well.
I'm not sure why this is a problem - you have set strict min value for yAxis, so chart is forced to cut off that line, remove that option, and this will work perfectly fine: http://jsfiddle.net/DruGa/5/
Related
Highcharts.chart('container', {
chart: {
height: 'some height',
},
title: {
text: ""
},
legend: {
enabled: false
},
credits: {
enabled: false
},
series: [], // data
xAxis: {
title: {
enabled: false
},
lineWidth: 1,
lineColor: 'white',
tickAmount: 5,
min: 100000000,
max: 1000000000000,
tickPixelInterval: 100,
tickPositions: [1000000000, 10000000000, 100000000000, 1000000000000]
},
yAxis: {
height: '100%',
title: {
enabled: true,
text: 'Investment'
},
tickAmount: 10
}
})
The above code produces something like this
The labels on the xAxis are overlapping as the range is quite high(Ranging from 100 million to 1 trillion).
On reading highcharts API doc, I found that the method tickPositions overwrites the values in tickPixelInterval & tickInterval. That's why I'm not able to specify custom tickInterval value.
What I want is, to keep equal spacing between each of the mentioned tickPositions. It'll be fine if the bubbles overlap.
I've noticed that if I specify yAxis.max in a Highcharts call:
$('#container').highcharts({
//snip...
yAxis: {
max: 30000,
minorGridLineWidth: 1,
minorTickInterval: 10000,
title: {
enabled: false
}
},
//snip...
});
The resulting chart will cap the yAxis range at 30000:
However, if I specify a somewhat short height on the chart's target container:
<div id="container" style="height:126px; width:420px;"></div>
The resulting chart will not "honor" the yAxis max property:
Please see https://jsfiddle.net/jhfrench/kpf2b3Lf/ for an example.
How can I force Highcharts to respect yAxis.max when I specify a short height?
You can manually select a tickInterval to force highcharts to respect the axis max. This should work if the size of your container is constant.
Here's an updated fiddle: https://jsfiddle.net/kpf2b3Lf/1/
yAxis: {
max: 30000,
minorGridLineWidth: 1,
minorTickInterval: 10000,
tickInterval: 10000,
title: {
enabled: false
}
},
I've 2 yAxis in demo, I set min/max value for both yAxis is min of 0, max of 200. But they don't work correctly. They are applied 250 for both.
Thanks
Normally I would expect endOnTick:false would sort the issue, but that didn't work on it's own.
I got it to work using endOnTick:false together with alignTicks:false.
yAxis: [{
max: 200,
min: 0,
alignTicks: false,
endOnTick: false,
title: {
text: 'Primary Axis'
}
}, {
max: 200,
min: 0,
alignTicks: false,
endOnTick: false,
title: {
text: 'Secondary Axis'
},
gridLineWidth: 0,
opposite: true
}],
I have to use tickmarkPlacement: 'on' instead of between but I don't need the extra ticks on left and right. My chart should look like a square. Here is the expected result:
Let's see my fiddle: http://jsfiddle.net/gcLGS/
You can use tickPixelInterval paramter and startOnTick / endOnTick as true.
http://jsfiddle.net/gcLGS/1/
xAxis: {
tickLength: 0,
gridLineWidth: 1,
labels: {
enabled: false
},
tickPixelInterval: 100,
startOnTick: true,
endOnTick:true,
tickmarkPlacement: 'on',
},
I am having a problem with Highstock. I have a multi-pane chart (multiple charts stacked on top of each other). When I specify a min and max value for the y-axis, if any value in the series is less than the min value, it will extend below the chart, usually extending into the chart below. For some reason, the same is not true for when a data point is above the max value. I can't tell if this is a bug in Highstock or just something I am doing wrong.
I understand that this is an unusual use case for Highstock, but it is necessary for the application I am developing. The only example I can find for multi-pane charts with Highstock is on their demo page at http://www.highcharts.com/stock/demo/candlestick-and-volume, but that is a different situation.
Please see my example: http://jsfiddle.net/afoster777/UJaJG/
Here is my configuration:
var chart = new Highcharts.StockChart({
chart: {
renderTo: 'container',
alignTicks: false,
plotOptions: {
shadow: false,
series: {
connectNulls: false
},
plotBorderColor: "#CCCCCC",
plotBorderWidth: 2,
plotBackgroundColor: "#FFFFFF"
}
},
navigator: {
enabled: false
},
xAxis: {
title: {
text: 'Time'
},
type: 'datetime',
ordinal: false
},
yAxis: [{
title: {
text: "Y"
},
min: 0.8,
max: 0.9,
labels: {
align: 'right',
x: -6,
y: 3
},
lineWidth: 1,
height: 250,
offset: 0,
startOnTick: false,
endOnTick: false
}, {
title: {
text: "Y"
},
min: 0.8,
max: 0.9,
labels: {
align: 'right',
x: -6,
y: 3
},
lineWidth: 1,
top: 320,
height: 250,
offset: 0,
startOnTick: false,
endOnTick: false
}],
series: [{
type: 'line',
id: 0,
name: 'Series1',
yAxis: 0,
data: series1data,
marker: {
enabled: false
},
tooltip: {
valueDecimals: 2
},
gapSize: 2,
connectNulls: false
}, {
type: 'line',
id: 1,
name: 'Series2',
yAxis: 1,
data: series2data,
marker: {
enabled: false
},
tooltip: {
valueDecimals: 2
},
gapSize: 2,
connectNulls: false
}]
});
I would appreciate any suggestions.
Edit: Apparently there is an open issue about this already (Issue# 1387). Does anyone have any ideas for a workaround?
Apparently github user sappling has made a fix for this problem and submitted a pull request. I included sappling's version of Highstock <script src="http://raw.github.com/sappling/highcharts.com/clip/js/highstock.src.js"></script> instead of the vanilla one, and the problem seems to be fixed. http://jsfiddle.net/afoster777/jEZ9w/