title: how to change the format of heatmap data to percentage?
body: <p>I am trying to change the format of heatmap highchart data, but i am getting error while adding formatter (Property 'point' does not exist on type '{ enabled: boolean; formatter: () =&gt; any; }'.), below is my code:</p>
  <pre><code>collection = [
      {
          &quot;x&quot;: 0,
          &quot;y&quot;: 0,
          &quot;value&quot;: 428
      },
      {
          &quot;x&quot;: 1,
          &quot;y&quot;: 0,
          &quot;value&quot;: 0.023364
      },
      {
          &quot;x&quot;: 2,
          &quot;y&quot;: 0,
          &quot;value&quot;: 0.023364
      },
      {
          &quot;x&quot;: 3,
          &quot;y&quot;: 0,
          &quot;value&quot;: 0
      },
      {
          &quot;x&quot;: 4,
          &quot;y&quot;: 0,
          &quot;value&quot;: 0
      },
      {
          &quot;x&quot;: 5,
          &quot;y&quot;: 0,
          &quot;value&quot;: 0
      },
      {
          &quot;x&quot;: 6,
          &quot;y&quot;: 0,
          &quot;value&quot;: 0
      },
      {
          &quot;x&quot;: 7,
          &quot;y&quot;: 0,
          &quot;value&quot;: 0
      },
      {
          &quot;x&quot;: 8,
          &quot;y&quot;: 0,
          &quot;value&quot;: 0
      },
      {
          &quot;x&quot;: 9,
          &quot;y&quot;: 0,
          &quot;value&quot;: 0
      },
      {
          &quot;x&quot;: 10,
          &quot;y&quot;: 0,
          &quot;value&quot;: 0
      },
      {
          &quot;x&quot;: 11,
          &quot;y&quot;: 0,
          &quot;value&quot;: 0
      },
      {
          &quot;x&quot;: 12,
          &quot;y&quot;: 0,
          &quot;value&quot;: 0
      }
  ]
  
  chartOptions = {
          lang: {
            noData: 'No data found',
          },
          noData: {
            style: {
              fontWeight: 'bold',
              fontSize: '15px',
            },
          },
          chart: {
            type: 'heatmap',
            events: {
              load: function () {
                const chart = this;
              },
            },
          },
          title: {
            text: null,
          },
          credits: {
            enabled: false,
          },
          xAxis: {
            title: {
              text: 'R-Score',
            },
            categories: x_data,
            opposite: true,
            tickWidth: 0,
          },
  
          legend: {
            visible: true,
          },
  
          yAxis: [
            {
              height: '80%',
              categories: Object.keys(y_data),
              title: {
                align: 'high',
                offset: 0,
                text: 'F-Score',
                rotation: 0,
                y: -10,
              },
              reversed: true,
            },
            {
              height: '20%',
              top: '80%',
              title: null,
            },
            {
              height: '20%',
              top: '80%',
              linkedTo: 2,
              title: null,
              offset: 0,
            },
          ],
          colorAxis: [
            {
              endOnTick: false,
              startOnTick: false,
              showInLegend: true,
            },
          ],
  
          plotOptions: {
            heatmap: {
              borderWidth: 1,
              dataLabels: {
                enabled: true,
                color: '#000000',
              },
            },
            series: {
              events: {
                click: (event: any) =&gt; this.openPopup(event),
              },
            },
          },
          series: [
            {
              name: '',
              type: 'heatmap',
              borderWidth: 1,
              yAxis: 0,
              data: (function () {
                collection.forEach(function (p: any) {
                  if (p.x &gt;= 0) {
                    var basePoint = collection.find(
                      (p_: any) =&gt; p_.x === 0 &amp;&amp; p_.y === p.y
                    );
                    p.percentValue = p.value;
                    p.value = p.value * basePoint.value;
                  }
                });
                return collection;
              })(),
              dataLabels: {
                enabled: true,
                formatter: function():any {
                  return this.point.percentValue ? this.point.percentValue * 100 + &quot;%&quot; : this.point.value;
                }
              },
  
            },
          ],
        };
  
  </code></pre>
  <p>Please help me on how can i add this percent value in my heatmap. Any help would be highly appreciated. Thanks in advance!</p>