ApexCharts Heatmap Legend Highlighting and Color Gradient Issues with Small Decimal Ranges

Question

I am working on a heatmap chart with ApexCharts. The heatmap coloring works as expected when setting the colorScale.ranges. When hovering over one range of the legend the highlighting works as expected when working with ranges that are not within decimal range of one number (e.g. 27.2 to 28.2). However, when I introduce a range from 27.2 to 27.8 the highlighting breaks. I have added a minimum reproducible example to illustrate the problem. Is this a bug within ApexCharts or is there a better way to achieve what I want (fix highlighting when having small ranges)?

As a side note, I also encounter a color change when switching the first range's from between 0 and 0.1. I'd like to know why.

Here's a minimal, reproducible example:

import React from 'react';
import dynamic from 'next/dynamic';

const ApexChart = dynamic(() => import('react-apexcharts'), {
    ssr: false,
    loading: () => <p>Loading...</p>
});

var options = {
    chart: {
        type: 'heatmap',
    },
    series: [
        {
            name: 'Row 1',
            data: [
                { x: 'Column 1', y: 20.5 },
                { x: 'Column 2', y: 27.3 },
                { x: 'Column 3', y: 33.1 },
            ],
        },
        {
            name: 'Row 2',
            data: [
                { x: 'Column 1', y: 23.9 },
                { x: 'Column 2', y: 29.5 },
                { x: 'Column 3', y: 35.6 },
            ],
        },
        {
            name: 'Row 3',
            data: [
                { x: 'Column 1', y: 30.4 },
                { x: 'Column 2', y: 33.2 },
                { x: 'Column 3', y: 38.0 },
            ],
        },
    ],
    plotOptions: {
        heatmap: {
            colorScale: {
                ranges: [
                    // Problem: When the 'Moderate' range is included in the heatmap colorScale ranges, 
                    // and the 'from' and 'to' values are within a decimal range of one number (e.g., 27.2 to 27.7), 
                    // the legend item hover functionality breaks. Specifically, when hovering over the 
                    // 'Moderate' legend item, the corresponding cells in the heatmap are not highlighted. 
                    // This issue does not occur when the 'Moderate' range is removed or when the 'from' and 'to' 
                    // values span a larger range. This suggests a potential bug with how ApexCharts handles 
                    // heatmap colorScale ranges and legend item highlighting, particularly for ranges that 
                    // span a small decimal interval.
                    // Note: There is also a noticeable color change when the lower limit of the range 
                    // is switched from 0.1 to 0. This could be due to how ApexCharts calculates and applies 
                    // the gradient for the heatmap. Changing the lower limit of the range might slightly 
                    // shift the gradient, causing a perceptible change in color. This behavior is observed 
                    // even when the 'Moderate' range is removed.
                    { from: 0, to: 24.0, name: 'Cold', color: '#00A100' },
                    { from: 24.0, to: 27.2, name: 'Slightly Cold', color: '#128FD9' },
                    { from: 27.2, to: 27.7, name: 'Moderate', color: '#FFA844' },
                    { from: 27.7, to: 40.0, name: 'Warm', color: '#FFB200' },
                ],
            },
        },
    },
};

const Page = () => (
    <ApexChart options={options} series={options.series} type="heatmap" height={350} width={350} />
);

export default Page;