ApexChart heatmap lerp between two colors

Question

I am trying to make a heatmap similar to GitHub's contributions chart using ApexChart Heatmap. However, I want to go from gray to blue as the values get higher. I also want to cap the color range, so that after a certain number of contributions it is the same color regardless. It would also be really nice if low values did not look like 0 (since a few contributions is still much more than 0). However I am unable to do so. Any help would be welcome. I could not do it using colorScale: but that is probably just a skill issue. Here are my chart options:

 const chartOptions = {
    chart: {
      type: "heatmap",
      animations: {
        enabled: false,
      },
      redrawOnWindowResize: false,
      selection: {
        enabled: false,
      },
    },

    plotOptions: {
      heatmap: {
        radius: 5,
      },
    },
    dataLabels: {
      enabled: false
    },

    colors: ["#008FFB"],
    stroke: {
      colors: ["#D3D3D3"],
      width: 2,
    },
    title: {
      text: "User Contributions",
    },

    xaxis: {
      type: "datetime",
      labels: {
        format: "MMM",
        showDuplicates: false,
      },
    },
  };

...

return (
    <div>
      <div id="chart">
        <ReactApexChart
          options={chartOptions}
          series={chartData}
          type="heatmap"
          height={280}
          width={1200}
        />
      </div>
      <div id="html-dist"></div>
    </div>
  );

Here is the result :

Answer 1

You'll need to add a range, like this:

 plotOptions: {
      heatmap: {
        colorScale: {
          ranges: [
            { from: 0, to: 1,  color: "#ffffff" },
            { from: 1, to: 2, color: "#ece7fc" },
            { from: 2, to: 3, color: "#dacff8" },
            { from: 3, to: 4, color: "#c6b8f5" },
            { from: 4, to: 5,  color: "#b2a1f1" },
            { from: 5, to: 6,  color: "#9c8bed" },
            { from: 6, to: 7, color: "#8575e8" },
            { from: 7, to: 8,  color: "#6a5fe4" },
            { from: 8, to: 9, color: "#494adf" },
            { from: 9, to: 10,  color: "#0036da" },
          ],
          min: 0,
          max: 10,
        },
      },
    },

This way you'll be able to control the colours and you'll also be able to cap the colours at a certain contribution.