Apex Charts temperature line chart example

Creating a temperature gradient line chart with Apex Charts. The hotter the temperature value the redder it is, whilst colder means blue.

What starts as a basic line chart changes when using gradient fill type and colorStops.

The colorStops refer to the ramping of the colour change.

The chart config:

let options = {
    chart: {
        height: 380,
        type: "line",
        foreColor: '#6D6D6D'
    },
    series: [
        {
            name: "Temperature",
            data: [15, 20, 25, 29, 33, 36, 37, 32, 27, 23]
        }
    ],
    fill: {
        type: "gradient",
        gradient: {
            type: 'vertical',
            shadeIntensity: 1,
            opacityFrom: 1,
            opacityTo: 1,
            colorStops: [
                {
                    offset: 10,
                    color: "#fc440b",
                    opacity: 1
                },
                {
                    offset: 55,
                    color: "#ffce63",
                    opacity: 1
                },
                {
                    offset: 90,
                    color: "#0a95f9",
                    opacity: 1
                }
            ]
        }
    },
    grid: {
        borderColor: '#6D6D6D'
    },
    stroke: {
        curve: 'smooth'
    },
    yaxis: {
        min: 0,
        max: 45
    },
    xaxis: {
        type: 'category',
        tickAmount: 8,
        categories: [
            ['4 AM'],
            ['6 AM'],
            ['8 AM'],
            ['10 AM'],
            ['12 PM'],
            ['2 PM'],
            ['4 PM'],
            ['6 PM'],
            ['8 PM'],
            ['10 PM']
        ],
        labels: {
            show: true
        }
    }
};

let chart = new ApexCharts(document.querySelector("#chart"), options);

chart.render();

Html:

<div id="chart"></div>