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/
Related
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'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.
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',
},
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/
I need to plot a radar chart using HighCharts; in particular, all of the series have a different scale. I am able to draw correctly the radar chart using multiple scales (one per y-axis), but I see multiple overlapping labels on the main y-axis, which is clearly wrong. Now, I want instead to plot the labels related to every y-axis on the corresponding y-axis. How can I do this ?
Here is a snippet that can be pasted in jsFiddle to verify that the labels indeed overlap.
$(function () {
window.chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
polar: true,
type: 'line',
zoomType: 'xy'
},
title: {
text: 'Indicators Radar Chart',
x: -80
},
pane: {
size: '90%'
},
xAxis: {
categories: ['A', 'B', 'C', 'D'],
tickmarkPlacement: 'on',
lineWidth: 0,
min: 0
},
yAxis: [{
gridLineInterpolation: 'polygon',
lineWidth: 0,
min: 0,
labels: {
enabled: true
}
}, {
gridLineInterpolation: 'polygon',
lineWidth: 0,
min: 0,
labels: {
enabled: true
}
}, {
gridLineInterpolation: 'polygon',
lineWidth: 0,
min: 0,
labels: {
enabled: true
}
}],
tooltip: {
shared: true,
valuePrefix: ''
},
legend: {
align: 'right',
verticalAlign: 'top',
y: 100,
layout: 'vertical'
},
series: [{
name: 'Austria',
yAxis: 0,
data: [0.130435, 35.043480, 29288.695312, 236960.296875],
pointPlacement: 'on'
}, {
name: 'Germany',
yAxis: 1,
data: [0.000000, 42.217392, 149103.906250, 589782.500000],
pointPlacement: 'on'
}, {
name: 'Italy',
yAxis: 2,
data: [2.304348, 44.826088, 132805.218750, 878785.937500],
pointPlacement: 'on'
}]
});
});
The output I am trying to obtain is such that for this particular chart, the labels related to the different scales appear along each axis: from the center point to A, from the center point to B, from the center point to C and from the center point to D. The problem is that right now all of the labels appear on the same axis, from the center point to A.
Thank you in advance.
Demo: http://www.highcharts.com/jsbin/eyugex/edit
You seem to assume that each of the axes extend from the center to different directions, but this is not the case. All Y axes extend from the center. The X axis starts on top of the chart and follows the perimeter clockwise around the perimeter and ends on top. The Y axis labels are drawn where the X axis starts, which is up.
In a chart like this it wouldn't make sense to add multiple Y axes because they are all drawn on top of each other and you can't visually distinguish one from another.