Highcharts boxplot yAxis

Question

I have a boxplot chart from highcharts lib. Here is my component and data:

Highcharts.chart('container', {
    chart: {
        type: 'boxplot',
        "width": 165
    },

    title: {
        text: null
    },

    legend: {
        enabled: false
    },

    xAxis: {
        categories: ['1', '2', '3', '4', '5'],
        title: {
            text: null
        }
    },

    yAxis: {
        title: {
            text: 'Observations'
        },
    },

    series: [{
        name: 'Observations',
        data: [
            [3, 836, 864, 882, 10312]
        ],
        tooltip: {
            headerFormat: '<em>Experiment No {point.key}</em><br/>'
        }
    }, {
        name: 'Outliers',
        color: Highcharts.getOptions().colors[0],
        type: 'scatter',
        data: [ // x, y positions where 0 is the first category
            [0, 644],
        ],
        marker: {
            fillColor: 'white',
            lineWidth: 1,
            lineColor: Highcharts.getOptions().colors[0]
        },
        tooltip: {
            pointFormat: 'Observation: {point.y}'
        }
    }]

});

Here is how it looks just now:

As you can see, the minimum and maximum values are very different (3 and 10312), which makes my chart almost unreadable. What can i do about it? Can i skip some of my labels in yAxis? I tried applying stops, max and other things, but none of them worked

Answer 1

For such cases, you should use logarithmic y-axis type:

  yAxis: {
    title: {
      text: 'Observations'
    },
    type: 'logarithmic',
    endOnTick: false
  }

Live example: https://jsfiddle.net/BlackLabel/qkx5whgc/

or breaks and tickPositions, for example:

  yAxis: {
    title: {
      text: 'Observations'
    },
    endOnTick: false,
    breaks: [{
      from: 5,
      to: 600,
      breakSize: 0
    }, {
      from: 700,
      to: 800,
      breakSize: 0
    }, {
      from: 900,
      to: 9900,
      breakSize: 0
    }, {
      from: 10000,
      to: 10312,
      breakSize: 0
    }],
    tickPositions: [0, 700, 900, 10000],
    max: 10312
  }

Live example: https://jsfiddle.net/BlackLabel/wj05nm6b/

---

API Reference:

https://api.highcharts.com/highcharts/yAxis.breaks

https://api.highcharts.com/highcharts/yAxis.type