title: How remove zero values in a heatmap?
body: <p>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.</p>
  
  <p>One of the elements I would like to remove the number <code>0</code> when there are no matches:</p>
  
  <p><a href="https://i.stack.imgur.com/sneZe.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/sneZe.png" alt="enter image description here"></a></p>
  
  <p>How can I do that?</p>
  
  <p>A simplified (but functional) version of the heatmap is below (in case there are problems to run it, a <a href="https://jsfiddle.net/ywhn8v6z/1/" rel="nofollow noreferrer">JSFiddle is available as well</a>). The <code>0</code> is what I want to get rid of.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>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 '&lt;b&gt;' + this.series.xAxis.categories[this.point.x] + '&lt;/b&gt; contacted &lt;br&gt;&lt;b&gt;' +
          this.point.value + '&lt;/b&gt; times &lt;br&gt;&lt;b&gt;' + this.series.yAxis.categories[this.point.y] + '&lt;/b&gt;';
      }
    },
    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'
      }
    }]
  });</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://code.highcharts.com/modules/exporting.js"&gt;&lt;/script&gt;
  &lt;script src="https://code.highcharts.com/modules/heatmap.js"&gt;&lt;/script&gt;
  &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/highcharts/6.0.6/highcharts.js"&gt;&lt;/script&gt;
  &lt;div id="container"&gt;&lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p><sub>I am sorry if the post seems "<em>not to show effort of finding the solution</em>" but I browsed the API documentation and it is just, well, overwhelming</sub></p>
  
  <p>EDIT: I found the solution to the borders (<code>borderWidth: 1</code>) so I limit my question to the removal of the <code>0</code>.</p>