Hex color cannot be used in quickchart with apexchart

Apexchart version: 3.44

When specify hex code on plotOptions in heatmap, getting error

Error: Evaluation failed: TypeError: Cannot read property 'dataURI' of undefined at puppeteer_evaluation_script:2:52

I tried to change to string color, such as 'black', 'red', etc. No errors found but the background become gray instead.

            ...
            plotOptions: {
                heatmap: {
                    radius: 5,
                    colorScale: {
                        ranges: [
                            { name: 'asd', from: 0, to: 50, color: "#000000" ← here },
                            { name: 'samad', from: 51, to: 100, color: "#dddddd" },
                            { name: 'samad', from: 101, to: 200, color: "#cccccc" }
                        ]
                    },
                    useFillColorAsStroke: true,
                }
            }
            ...

Working URL in HTML: JSFiddle

QuickChart: URL

Solution

Because you have not encoded the hex codes.

Background of the chart canvas. Accepts rgb format (rgb(255,255,120)), colors (red), and URL-encoded hex values (%23ff00ff).

You can use this website for this purpose: https://www.url-encode-decode.com/

#000 becomes %23000

#ddd becomes %23ddd

#ccc becomes %23ccc

You have three not-encoded color codes, I have encoded them and converted your url into this: https://quickchart.io/apex-charts/render?apexChartsVersion=3.44&config=%7Bchart:%7Btype:%27heatmap%27,%7D,series:%5B%7Bname:%27min50-59%27,data:%5B10,4,3,50,49,60,70,91,125%5D%7D,%7Bname:%27min40-49%27,data:%5B10,4,3,50,49,60,70,91,125%5D%7D,%7Bname:%27min30-39%27,data:%5B10,4,3,50,49,60,70,91,125%5D%7D,%7Bname:%27min20-29%27,data:%5B10,4,3,50,49,60,70,91,125%5D%7D,%7Bname:%27min10-19%27,data:%5B31,40,35,50,49,60,70,91,125%5D%7D,%7Bname:%27min00-09%27,data:%5B0,4,3,50,49,60,70,91,125%5D%7D%5D,xaxis:%7Bcategories:%5B%2201%22,%2202%22,%2203%22,%2204%22,%2205%22,%2206%22,%2207%22,%2208%22,%2209%22%5D%7D,stroke:%7Bwidth:0%7D,plotOptions:%7Bheatmap:%7Bradius:30,colorScale:%7Branges:%5B%7Bname:%27asd%27,from:0,to:50,color:%22%23000%22%7D,%7Bname:%27samad%27,from:51,to:100,color:%22%23ddd%22%7D,%7Bname:%27samad%27,from:101,to:200,color:%22%23ccc%22%7D%5D%7D,useFillColorAsStroke:true,%7D%7D%7D

Result