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
}
},
Related
How can I make sure that the values on the x-axis intersect the y-axis.
When I use categories on the yAxis there seems to be a weird offset which causes the axis going out of the boundaries.
It didn't work with setting the startOnTick: true and the endOnTick: true properties.
JS fiddle with categories on y-axis
http://jsfiddle.net/m8h0wLq4/13/
JS fiddle without categories on y-axis
http://jsfiddle.net/gh/get/library/pure/highcharts/highcharts/tree/master/samples/highcharts/demo/polar-spider/
Set tickmarkPlacement: 'on' for your yAxis:
yAxis: {
gridLineInterpolation: 'polygon',
lineWidth: 0,
pointInterval : 1,
min: 0,
max : 4,
tickmarkPlacement: 'on',
categories: ['Basic', 'Intermediate', 'Advanced', 'Expert']
},
http://jsfiddle.net/m8h0wLq4/14/
I have set both a column and a line in one chart, such as the link:
https://jsfiddle.net/dodouwang/wtjbgav0/1/
Highcharts.chart('container', {
xAxis: {
type: 'datetime',
},
plotOptions: {
column: {
turboThreshold: 10000,
borderWidth: 0,
pointPadding: 0,
groupPadding: 0
},
},
series: [{
type: 'column',
name: 'column',
data: [[1497484800000,210000],[1497571200000,120000],[1497744000000,190000]]
},{
type: 'line',
name: 'line_wide',
data: [[1497484800000,210000],[1497571200000,120000]]
},{
type: 'line',
name: 'line_narrow',
data: [[1497484800000,210000],[1497498000000,120000]],
visible: false
}],
});
But I found that if the gap between the points of the line is too narrow(less than one day), then the width of the column is automatic set to no wider than the gap. Is it a bug or a feature?
you can visit the link above, the default show is a column with a "wider" line, it seems all right. But if you unselect the "line_wide" and select the "line_narrow", then the bug accurs.
How to fix it?
P.S.: I have another question of this link's column: I have set the xAxis to 'datetime', and the column data is [[1497484800000,210000],[1497571200000,120000],[1497744000000,190000], and set the Gapping to 0 to make the width of the column as wider as possible. But, when there are only column in the chart(the 2 lines are unselected), why the max width of the column is a "day", not an "hour" or a "minute" or other width?
What you need is series.pointRange option. Width of the column depends on that value and if it is not configured - the range will be computed as the distance between the two closest data points (on axis, so each series which have that specific axis will be taken into the account).
If you set pointRange to 1 day, columns widths will span for 1 day:
plotOptions: {
column: {
turboThreshold: 10000,
borderWidth: 0,
pointRange: 1000 * 3600 * 24,
pointPadding: 0,
groupPadding: 0
},
},
example: https://jsfiddle.net/nogfr6js/
The navigator in Highstock only seems to affect the first xAxis. The second xAxis, as in the example linked to below, isn't rescaled, and always shows all data.
See jsfiddle below:
https://jsfiddle.net/wardrop/t9ug4pm7/7/
Does anyone know how to fix this?
You can set extremes in the second axis manually after extremes are set in the first axis.
xAxis: [{
type: 'datetime',
minRange: 24 * 3600000, // 1 day
labels: {
align: "left",
rotation: 45
},
dateTimeLabelFormats: {
day: '%e %b %Y'
},
events: {
afterSetExtremes: function (e) {
this.chart.xAxis[1].setExtremes(e.min, e.max, true, false);
}
}
},
example: https://jsfiddle.net/t9ug4pm7/9/
You can also linked two axis, so the linked axis' extremes will follow after the master axis. But for columns it is needed to define pointRange because without it, columns might be drawn incorrectly.
, { //axis
type: 'datetime',
linkedTo: 0, // linked to master axis
minRange: 24 * 3600000,
lineWidth: 0,
tickWidth: 0,
labels: {enabled: false},
opposite: true
}
series: [{
id: 'daily',
name: 'Daily',
type: 'column',
color: 'rgb(124, 181, 236)',
data: data['daily'],
pointRange: 1000 * 3600 * 24,
},
example: https://jsfiddle.net/t9ug4pm7/11/
I'm using Highcharts Highstock chart to display daily data. The vertical (x-axis) gridlines do not align with the data point (gridline is to the left of the data point). Does anyone know how to align the gridline with the data point?
http://jsfiddle.net/kngz3exf/3/
Highcharts.setOptions({
global: {
useUTC: false
}
});
$(function () {
$('#container').highcharts('StockChart', {
rangeSelector: {
enabled: false
},
yAxis: {
gridLineWidth: 0
},
xAxis: {
gridLineColor: '#000000',
gridLineWidth: 1,
lineColor: '#000000',
tickColor: '#000000',
minorGridLineColor: '#000000',
minorGridLineWidth: 1,
minorTickColor: '#000000',
ordinal: true,
tickInterval: 86400000,
minorTickInterval: 86400000
},
series: [{
data:[
[1417410000000, -0.4818850000000001],
[1417496400000, -0.40866199999999997],
[1417582800000, 0.20889499999999994],
[1417669200000, -0.623542],
[1417755600000, -0.060399999999999995],
[1418014800000, -0.56108],
[1418101200000, 0.30852700000000005],
[1418187600000, -0.4492829999999999],
[1418274000000, -0.275211],
[1418360400000, 0.013063999999999965],
[1418619600000, -0.27293900000000004],
[1418706000000, 0.49981200000000003],
[1418792400000, 0.2362090000000001],
[1418878800000, 0.4464490000000003],
[1418965200000, 1.2100639999999998],
[1419224400000, -0.792635],
[1419310800000, 0.14788899999999994],
[1419397200000, 0.011684],
[1419570000000, 0.08526699999999998],
[1419829200000, -0.12494599999999997],
[1419915600000, -0.06489100000000003],
[1420002000000, 0.279632]
]
}]
});
});
By changing my date format from ticks to Date.UTC(yyyy, mm, dd), I can get the data point to align with the vertical grid line.
What you need to do is set the useUTC to false. Now your Dec 2nd data show on Dec 2nd axis tick. Note that your data is not going to hit every major tick mark - looks like you are skipping weekends but your axis is not.
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/