Change color of toolip on Charts

[tommerty]

As the title says, I'm referring to the charts found here

I'm unsure how I can adjust the color of the tooltips provided when hovering.

I must point out that I converted this to tsx due to the charts not being available on Flowbite React (that I could see)

Here's my code with all it's dummy data:

import React, { useEffect } from "react";
import ApexCharts from "apexcharts";

const BlogMonthlyViews: React.FC = () => {
    useEffect(() => {
        const options = {
            chart: {
                height: "100%",
                maxWidth: "100%",
                type: "area",
                fontFamily: "Inter, sans-serif",
                dropShadow: {
                    enabled: false
                },
                toolbar: {
                    show: false
                }
            },
            tooltip: {
                enabled: true,
                x: {
                    show: false
                }
            },
            fill: {
                type: "gradient",
                gradient: {
                    opacityFrom: 0.55,
                    opacityTo: 0,
                    shade: "#f0b9b8",
                    gradientToColors: ["#f0b9b8"]
                }
            },
            dataLabels: {
                enabled: false
            },
            stroke: {
                width: 4
            },
            grid: {
                show: true,
                strokeDashArray: 4,
                padding: {
                    left: 2,
                    right: 2,
                    top: 0
                }
            },
            series: [
                {
                    name: "Views",
                    data: [234, 567, 123, 456, 789, 345, 678, 901, 234, 567, 123, 456, 789, 345, 678, 901, 234, 567, 123, 456, 789, 345, 678, 901, 234, 567, 123, 456, 789, 345],
                    color: "#f0b9b8"
                }
            ],
            xaxis: {
                categories: ["01 February", "02 February", "03 February", "04 February", "05 February", "06 February", "07 February", "08 February", "09 February", "10 February", "11 February", "12 February", "13 February", "14 February", "15 February", "16 February", "17 February", "18 February", "19 February", "20 February", "21 February", "22 February", "23 February", "24 February", "25 February", "26 February", "27 February", "28 February", "1 March", "2 March"],
                labels: {
                    show: false
                },
                axisBorder: {
                    show: false
                },
                axisTicks: {
                    show: false
                }
            },
            yaxis: {
                show: false
            }
        };

        if (document.getElementById("area-chart") && typeof ApexCharts !== "undefined") {
            const chart = new ApexCharts(document.getElementById("area-chart"), options);
            chart.render();
        }
    }, []);

    return (
        <div className="w-full rounded-xl">
            <div className="flex justify-between">
                <div>
                    <h5 className="leading-none text-3xl font-bold text-surface-900 dark:text-surface-100 pb-2">32.4k Views</h5>
                    <p className="text-sm font-normal text-surface-600 dark:text-surface-300">Past 30 days</p>
                </div>
            </div>
            <div id="area-chart" className=""></div>
        </div>
    );
};

export default BlogMonthlyViews;

Of course I'd like to adjust these for standard bg and dark:bg, as well as the text color inside.

Any help would be really appreciated!