the color gradient doesn't work leaflet.JS

Question

Sorry for asking again, I'm trying to implement a heatmap to Leaflet map but for some reason it seems all data points have the same color and there is no color gradient.

The min value of data is 565 and max is 2455, there's about 900000+ line of data. This is what I get all data shown in red

 var cfg = {

  "radius":2,
  "maxOpacity": .8,

  "scaleRadius": false,
  "useLocalExtrema": true,
  latField: 'lat',
  lngField: 'lng',
  valueField: 'value',
  gradient: { 565:"rgb(255,255,204)",1200:"rgb(255,237,160)",1300:"rgb(254,217,118)",1500:"rgb(254,178,76)",1800:"rgb(253,141,60)",2000:"rgb(252,78,42)",2100:"rgb(227,26,28)",2455:"rgb(177,0,38)" }
};
var heatmapLayer = new HeatmapOverlay(cfg);
var map = new L.Map('map', {
  center: new L.LatLng(28.762929,-9.755429),
  zoom: 5,
  maxZoom: 11,
  minZoom: 5,
  layers: [baseLayer, heatmapLayer]
});
heatmapLayer.setData(testData);

layer = heatmapLayer;

Answer 1

You have to use numbers between 0 and 1 for the gardient.

gradient: {
    // enter n keys between 0 and 1 here
    // for gradient color customization
    '.5': 'blue',
    '.8': 'red',
    '.95': 'white'
  },

https://www.patrick-wied.at/static/heatmapjs/example-full-customization.html

https://www.patrick-wied.at/static/heatmapjs/docs.html