Highchart.js Custom Y-Axis Ticker

Question

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?

Answer 1

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)