简体   繁体   中英

yAxis tickinterval in highcharts is not working as per the value

Currently i am working on radar chart in highcharts. so when providing the tickInterval value in yAxis is not plotting as per the given value. I mentioned the bug exactly in commenting. please refer it. and here is my fiddle

$(function () {
    $('#container').highcharts({
        chart: {
            polar: true
        },
        title: {
            text: 'Highcharts Polar Chart'
        },
        pane: {
            startAngle: 0,
            endAngle: 360
        },
        xAxis: {
            tickInterval: 45,
            min: 0,
            max: 360,
            labels: {
                formatter: function () {
                    return this.value + '°';
                }
            }
        },
        yAxis: {
        //providing tickInterval '1' is not working
        //but providing tickInterval '2' is working
            tickInterval: 1
        },
        plotOptions: {
            series: {
                pointStart: 0,
                pointInterval: 45
            },
            column: {
                pointPadding: 0,
                groupPadding: 0
            }
        },
        series: [{
            type: 'column',
            name: 'Column',
            data: [8, 7, 6, 5, 4, 3, 2, 1],
            pointPlacement: 'between'
        }, {
            type: 'line',
            name: 'Line',
            data: [1, 2, 3, 4, 5, 6, 7, 8]
        }, {
            type: 'area',
            name: 'Area',
            data: [1, 8, 2, 7, 3, 6, 4, 5]
        }]
    });
});

Thanks in advance.

So, That's a good question and what the highcharts doing in tickInterval is its calculating the tickInterval based on the user given value and it rounds values to make more readable.

But, the solution to your problem can be solved using tickPositioner . You can give your own axis value like this :

yAxis: {
   tickPositions: [1, 2, 3, 4, 5],
}

Here is the working jsFiddle

and you can also write a custom function for your tickPositioner like this

var ticks = [];
    for(var i=0;i<10;i++){
    ticks.push(i+1);
    }

yAxis: {
  tickPositions: ticks
}

Here is the jsFiddle

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM