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: () => any; }'.), below is my code:
collection = [
{
"x": 0,
"y": 0,
"value": 428
},
{
"x": 1,
"y": 0,
"value": 0.023364
},
{
"x": 2,
"y": 0,
"value": 0.023364
},
{
"x": 3,
"y": 0,
"value": 0
},
{
"x": 4,
"y": 0,
"value": 0
},
{
"x": 5,
"y": 0,
"value": 0
},
{
"x": 6,
"y": 0,
"value": 0
},
{
"x": 7,
"y": 0,
"value": 0
},
{
"x": 8,
"y": 0,
"value": 0
},
{
"x": 9,
"y": 0,
"value": 0
},
{
"x": 10,
"y": 0,
"value": 0
},
{
"x": 11,
"y": 0,
"value": 0
},
{
"x": 12,
"y": 0,
"value": 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) => this.openPopup(event),
},
},
},
series: [
{
name: '',
type: 'heatmap',
borderWidth: 1,
yAxis: 0,
data: (function () {
collection.forEach(function (p: any) {
if (p.x >= 0) {
var basePoint = collection.find(
(p_: any) => p_.x === 0 && 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 + "%" : this.point.value;
}
},
},
],
};
Please help me on how can i add this percent value in my heatmap. Any help would be highly appreciated. Thanks in advance!