How remove zero values in a heatmap?

Question

I use highcharts to build a heatmap and after figuring out how to put my data in, I am overwhelmed with the number of possible configuration elements.

One of the elements I would like to remove the number 0 when there are no matches:

How can I do that?

A simplified (but functional) version of the heatmap is below (in case there are problems to run it, a JSFiddle is available as well). The 0 is what I want to get rid of.

Highcharts.chart('container', {
  chart: {
    type: 'heatmap',
    plotBorderWidth: 1
  },
  title: {
    text: null
  },
  xAxis: {
    categories: ['a', 'b'],
    title: "attackers",
  },
  yAxis: {
    categories: ['x', 'y'],
    title: "sentinels",
  },
  colorAxis: {
    dataClasses: [{
      to: 1,
      color: '#FFFFFF'
    }, {
      from: 1,
      to: 10,
      color: '#FFE4E1'
    }, {
      from: 10,
      to: 100,
      color: '#FA8072'
    }, {
      from: 100,
      to: 1000,
      color: '#FC1501'
    }, {
      from: 1000,
      to: 10000,
      color: '#660000'
    }, {
      from: 10000,
      to: 100000,
      color: '#330000'
    }, ]
  },
  legend: {
    align: 'right',
    layout: 'vertical',
    margin: 0,
    verticalAlign: 'top',
    y: 25,
    symbolHeight: 10
  },
  tooltip: {
    formatter: function() {
      return '<b>' + this.series.xAxis.categories[this.point.x] + '</b> contacted <br><b>' +
        this.point.value + '</b> times <br><b>' + this.series.yAxis.categories[this.point.y] + '</b>';
    }
  },
  series: [{
    name: 'Connexion per ip',
    //turboThreshold: 5000,
    borderWidth: 0,
    data: [
      [0, 0, 10],
      [0, 1, 0],
      [1, 0, 0],
      [1, 1, 10]
    ],
    dataLabels: {
      enabled: true,
      color: '#000000'
    }
  }]
});

<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/heatmap.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/highcharts/6.0.6/highcharts.js"></script>
<div id="container"></div>

_{I am sorry if the post seems "not to show effort of finding the solution" but I browsed the API documentation and it is just, well, overwhelming}

EDIT: I found the solution to the borders (borderWidth: 1) so I limit my question to the removal of the 0.

Answer 1

Check plotOptions.series.dataLabels.format and only return values which are non zero:

  plotOptions: {
    series: {
      dataLabels: {
        formatter: function() {
          if (this.point.value > 0) {
            return this.point.value
          }
        }

      }

    }
  },

Fiddle demo