<div id="chart"></div>
#chart {
  max-width: 650px;
  margin: 1rem;
}

body {
  background: #262626;
}
    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();

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/apexcharts/3.28.3/apexcharts.min.js