23

I am using highcharts for the first time, and I am trying to figure out how to set the Y axis points static.

I have used min=0 and max=140 , and the points on y axis come up as 0,25,50,75,100,125 and 150. Wherein I want it as 0,20,40,60,80,100,140.

Can someone let me know how could I achieve this.

Below is the highchart optins :

 var chart1 = new Highcharts.Chart({
        chart: {
            renderTo: 'Div1',
            width: 600,
            height: 400

        },
        yAxis:{
            min: 0, max: 140,

            lineColor: '#FF0000',
            lineWidth: 1,
            title: {
                text: 'Values'

        },
        plotLines: [{
                value: 0,
                width: 10,
                color: '#808080'
            }]
        },
        series: [{
            name: 'Value',
            data: YaxisValuesArray
        }]
    });

});

Points on X axis

2 Answers 2

43

You can set the tickInterval (http://api.highcharts.com/highstock#yAxis.tickInterval) on the axis http://jsfiddle.net/blaird/KdHME/

$(function () {
    var chart1 = new Highcharts.Chart({
        chart: {
            renderTo: 'Div1',
            width: 600,
            height: 400

        },

        credits: {
            enabled: false
        },


        title: {
            text: 'Productivity Report',

            x: -20 //center
        },

        xAxis: {
            lineColor: '#FF0000',
            categories: [1, 2, 3]
        },
        yAxis: {
            min: 0,
            max: 140,
            tickInterval: 20,
            lineColor: '#FF0000',
            lineWidth: 1,
            title: {
                text: 'Values'

            },
            plotLines: [{
                value: 0,
                width: 10,
                color: '#808080'
            }]
        },
        tooltip: {
            valueSuffix: ''
        },
        legend: {
            layout: 'vertical',
            align: 'right',
            verticalAlign: 'middle',
            borderWidth: 0
        },


        series: [{
            name: 'Value',
            data: [
                [1, 10],
                [2, 20],
                [3, 30]
            ]
        }]
    });

});
7
  • 1
    Thank you so much ! You saved my day, I was using tickinterval earlier. But it was not working ...And now I notice I was using tickinterval instead of tickInterval(case sensitive) :D
    – Janet
    Oct 23, 2013 at 17:31
  • I have another question for you how do I add "%" symbol next to the Y axis points like 20%,40%,60% etc..
    – Janet
    Oct 23, 2013 at 17:52
  • Thank You Barbara I got it !
    – Janet
    Oct 23, 2013 at 18:14
  • I did not want to post it as another question, I am tring to markers set on the x axis. Did not find a property under the API to achieve this. Could you please let me know how can I do it. I am attaching a picture. Blue points on x axis is what I am trying to get
    – Janet
    Oct 23, 2013 at 19:01
2

To do this using HighChart in a StockChart mode, I just need to set the property tickPixelInterval.

yAxis: {
            ...
            tickPixelInterval: 35
            ...
        } 

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.