Highchart - Boxplot - Extra category shown with no data

Question

When I'm drawing BOX Plot chart with Highchart like this : JSFiddle

chart: {
        type: 'boxplot',

    }

where category 2 "Merchant 2" is shown on x-axis even though we don't have data for it.

How can we avoid rendering categories on x-axis when they don't have data in box plot ?

Thank you

Answer 1

There's no built in mechanism in Highcharts that'll filter out and hide "unused" categories.

Workaround:

breaks functionality allows to hide regions on axes. Here's an algorithm that finds the categories that don't have any points above them and applies breaks:

    render: function() {
      if (redrawEnabled) {
        redrawEnabled = false;

        var emptyCategories = [],
          series = this.series,
          xAxis = this.xAxis[0],
          categories = xAxis.categories.slice(),
          categoryFlags = new Array(categories.length).fill(false), // indicates if any point has a value for category with the given index
          breaks = [],
          correspondingPoint;


        // find out which categories are 'used'
        for (var i = 0; i < categories.length; i++) {

          for (var ii = 0; ii < series.length; ii++) {
            if (!series[ii].visible) {
              continue;
            }

            correspondingPoint = series[ii].data.find((point) => point.x === i);
            if (correspondingPoint) {
              categoryFlags[i] = true;
              break;
            }
          }
        }

        // create and apply breaks
        categoryFlags.forEach(function(flag, index) {
          if (!flag) {
            breaks.push({
              from: index - 0.5,
              to: index + 0.5
            });
          }
        });

        //console.log(breaks)
        xAxis.update({
          breaks: breaks
        });
      }
      redrawEnabled = true;
    }

Live demo: http://jsfiddle.net/BlackLabel/fubwdm4x/

The key to understand how this solution works is that the categories are basically just information how to format axis' labels and position ticks. The tickInterval is always 1 and ticks are moved -0.5 to the left. So if you have categories like this: ['Category 1', 'Category 2', 'Category 3'] the positions of ticks are: -0.5, 0.5, 1.5 and 2.5.

---

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