Reputation: 3207
I have set up a Highchart.js quadrant as follows.
I'm battling to figure out how I can set the top y-axis value to 100 instead of 140. I have set the ticker to 70 as I require the y-axis to display one ticker at 70 and the max at 100. The height of each box should also reflect this so that the bottom row of boxes is taller than the top.
My code looks as follows:
var qx = $('#quadrant-x').attr('data-match');
var qy = $('#quadrant-y').attr('data-match');
// Highchart Data
var data = [
{ x:parseInt(qx), y:parseInt(qy) }
];
var chart = new Highcharts.Chart({
chart: {
renderTo: 'quadrant',
defaultSeriesType:'scatter',
borderWidth:1,
borderColor:'#ccc',
marginLeft:90,
marginRight:50,
backgroundColor:'#eee',
plotBackgroundColor:'#fff',
},
credits:{enabled:false},
title:{
text:''
},
legend:{
enabled:false
},
// tooltip: {
// formatter: function() {
// return '<b>'+ this.series.name +'</b><br/>'+
// this.x +': '+ this.y;
// }
// },
plotOptions: {
series: {
shadow:false,
}
},
xAxis:{
title:{
text:'Persistence'
},
min:0,
max:100,
tickInterval:50,
tickLength:0,
minorTickLength:0,
gridLineWidth:1,
showLastLabel:true,
showFirstLabel:false,
lineColor:'#ccc',
lineWidth:1
},
yAxis:{
title:{
text:'Passion',
rotation:270,
margin:25,
},
min:0,
max:100,
tickInterval:70,
tickLength:3,
minorTickLength:0,
lineColor:'#ccc',
lineWidth:1
},
series: [{
color:'white',
data: data
}]
}, function(chart) { // on complete
var width = chart.plotBox.width / 2.0;
var height = chart.plotBox.height / 2.0 + 1;
// console.log(chart);
// console.log(chart.plotBox.x);
// console.log(width);
// console.log(chart.plotBox.y);
// console.log(height);
chart.renderer.rect(chart.plotBox.x, chart.plotBox.y, width, height, 1)
.attr({
fill: '#3948cf',
zIndex: 0
})
.add();
chart.renderer.rect(chart.plotBox.x + width, chart.plotBox.y, width, height, 1)
.attr({
fill: '#00be1d',
zIndex: 0
})
.add();
chart.renderer.rect(chart.plotBox.x, chart.plotBox.y + height, width, height, 1)
.attr({
fill: '#ff0000',
zIndex: 0
})
.add();
chart.renderer.rect(chart.plotBox.x + width, chart.plotBox.y + height, width, height, 1)
.attr({
fill: '#ff4e00',
zIndex: 0
})
.add();
});
I've tried setting different values in the rect() function but this only changes the coloured overlay.
Is there an option I am missing?
Upvotes: 1
Views: 230
Reputation: 5803
You can set custom tick poistions by using tickPositions
. The yAxis
would then be
yAxis: {
tickPositions: [0, 70, 100],
...
}
Working jsfiddle: https://jsfiddle.net/v4s3gsm9/1/ (overlay updated by asker)
Upvotes: 1