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',
},
Related
I am working on a diagram with 2 independent y-axes. The left one with temperature data and the right one with humidity data. I want to synchronize the ticks from the right axis with the ticks and grid lines from the left axis.
I have achieved synchronization with tickPixelInterval, but only with startOnTick and endOnTick enabled. But unfortunately this will scale the series down.
https://jsfiddle.net/chartman2000/wLrf9s7x/5/
yAxis: [
{
// startOnTick: false,
// endOnTick: false,
gridLineWidth: 1,
gridLineDashStyle: 'Dash',
lineWidth: 1,
lineColor: '#ea0016',
labels: {
format: '{value}°C',
},
tickPixelInterval: 300 / 5,
min: 3,
max: 25
},
{
// startOnTick: false,
// endOnTick: false,
gridLineWidth: 0,
lineWidth: 1,
lineColor: '#008ecf',
title: {
rotation: -90,
},
labels: {
format: '{value}%',
},
opposite: true,
tickPixelInterval: 300 / 5,
min: 23,
max: 25.8,
},
],
Chart with false scaling but tick sync
Is there a solution to synchronize the ticks and get a correct scaling like in the chart in the second fiddle, where endOnTick and startOnTick are disabled?
https://jsfiddle.net/chartman2000/wLrf9s7x/
yAxis: [
{
startOnTick: false,
endOnTick: false,
gridLineWidth: 1,
gridLineDashStyle: 'Dash',
lineWidth: 1,
lineColor: '#ea0016',
labels: {
format: '{value}°C',
},
tickPixelInterval: 300 / 5,
min: 3,
max: 25
},
{
startOnTick: false,
endOnTick: false,
gridLineWidth: 0,
lineWidth: 1,
lineColor: '#008ecf',
title: {
rotation: -90,
},
labels: {
format: '{value}%',
},
opposite: true,
tickPixelInterval: 300 / 5,
min: 23,
max: 25.8,
},
],
Chart with tick sync but false scaling
( violet, brown and orange series belongs to the left axis | blue series belongs to the right axis )
I've been looking for a solution for days. Hopefully you can help me.
You can manually calculate and set tickPositions:
yAxis: [{
...,
tickPositions: [5, 10, 15, 20, 25],
min: 3,
max: 25
}, {
...,
tickPositions: [23.2545, 23.8911, 24.5274, 25.1637, 25.8],
min: 23,
max: 25.8,
}]
Live demo: https://jsfiddle.net/BlackLabel/n9xhsqfb/1/
API Reference: https://api.highcharts.com/highcharts/yAxis.tickPositions
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'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
}],
How can I get rid of the gray bottom line on axis X?
Any help please
jsFiffle example
$(function () {
$('#container').highcharts({
title: {text:''},
yAxis: {
gridLineWidth: 0,
minorGridLineWidth: 0,
labels:{enabled: false},
title: {enabled:false}
},
xAxis: {
gridLineWidth: 0,
minorGridLineWidth: 0,
tickWidth: 0,
categories: ['Jan', 'Feb'],
labels:{ enabled: false }
},
legend: {enabled: false},
series: [{ data: [29.9, 71.5] }]
});
});
Thanks
You were very close, simply add lineWidth: 0, see: http://jsfiddle.net/EtvMR/2/
xAxis: {
gridLineWidth: 0,
minorGridLineWidth: 0,
tickWidth: 0,
lineWidth: 0,
categories: ['Jan', 'Feb'],
labels: {
enabled: false
}
},
There is a property for every axis called lineWidth which determines the width of the axis line.
setting it to a value will give the user defined width to the axis.
here it should be given as 0
lineWidth: 0
here I have updated your fiddle with changes
I hope this is what you are looking for.
You can set the CSS property display: none for the class selector highcharts-axis and it will disappear:
.highcharts-axis {
display: none;
}
See: JSFiddle
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/