CODEWITHSUNDEEP
javascripthighcharts
Aleksandr K.
Aleksandr K.

Reputation: 1415

How to set non-linear step in yAxis on Highcharts

I'd like to show chart in this way:

I tried use min/max or floor/ceiling,but it doesn't works

    yAxis: {
      floor: 0,
      ceiling: 5,
      title: {
      text: 'Value'
      }
    },

I make example here: http://jsfiddle.net/4NV2J/2/

Could you please give me directions?

Upvotes: 1

Views: 684

Answers (1)

Paweł Fus
Paweł Fus

Reputation: 45079

Probably you need something like 'scale break', which isn't supported (yet) by Highcharts.

Workaround is to set some rounded value, and use different property for point to display in tooltip: http://jsfiddle.net/4NV2J/6/

You can also add label.formatter for yAxis, to make chart easier to read.

And code: 

$('#container').highcharts({

    chart: {
        type: 'spline'
    },
    title: {
        text: 'Y axis'
    },

    xAxis: {
        categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
    },

    yAxis: {
        tickInterval: 1,
        min: -1,
        max: 6,
        title: {
            text: 'Value'
        },
        labels: {
            formatter: function() {
                if(this.isFirst) {
                    return '< 0';
                } else if (this.isLast) {
                    return '> 5';
                } else {
                     return this.value;   
                }
            }
        }
    },
    tooltip: {
        pointFormat:  '<span style="color:{series.color}">\u25CF</span> {series.name}: <b>{point.options.trueValue}</b><br/>'   
    },
    series: [{
        data: [{
            y: 3,
            trueValue: 3
        }, {
            y: 4,
            trueValue: 4 
        }, {
            y: -1,
            trueValue: -4 
        }, {
            y: 6,
            trueValue: 40
        }]        
    }]
});

Upvotes: 2

Related Questions