flowbite icon indicating copy to clipboard operation
flowbite copied to clipboard

Flowbite Default CSS for ApexCharts Tooltips Not Functioning for Range Area Charts

Open cl3mcg opened this issue 10 months ago • 4 comments

Describe the bug Hi everyone,

I've noticed that the default CSS provided by Flowbite for ApexCharts tooltips is not working correctly for charts related to the Range Area Chart. I believe this issue is due to the way ApexCharts names the CSS classes for these specific charts.

For range area charts, ApexCharts uses the class .apexcharts-tooltip-rangebar for tooltips. However, this class does not seem to be included in Flowbite's plugin.js file.

Here is an example of a tooltip from an ApexCharts range area chart:

<div class="apexcharts-tooltip-rangebar">
    <div>
        <span class="series-name" style="color: #1E40AF">Price: </span>
    </div>
    <div>
        <span class="category">2025-01: </span>
        <span class="value start-value">USD 1,890</span>
        <span class="separator">-</span>
        <span class="value end-value">USD 2,139</span>
    </div>
</div>

To Reproduce Steps to reproduce the behavior:

  1. Initialize a chart with a type of rangeArea
  2. In the option object, setup the tooltips to be enabled:
        tooltip: {
            enabled: true,
            x: {
                show: true,
            },
            y: {
                show: true,
            },
        },
  1. See the tooltips not properly styled

Expected behavior The tool-tips styles should be uniformed regardless of the type of chart used.

Screenshots Proper styling expected (works on simple line charts) properstyle No styles applied on complex charts (does not work on complex Range Area Charts) nostyle

cl3mcg avatar Jan 13 '25 12:01 cl3mcg

+1, tool tips in our charts broke after updating to version 3.2.1. Had to roll back to 2.5.2. Apex charts version is 4.5

jurgen-bsm avatar Mar 04 '25 22:03 jurgen-bsm

Does your project support Tailwind 4? 3.0.0+ is the upgrade to it. I had the same issue and I notice downgrading to the latest supported version for Tailwind 3 (2.5.2) fixed it.

jose-INCUE avatar Mar 19 '25 19:03 jose-INCUE

Does your project support Tailwind 4? 3.0.0+ is the upgrade to it. I had the same issue and I notice downgrading to the latest supported version for Tailwind 3 (2.5.2) fixed it.

I am not using Tailwind 4 on my side.

cl3mcg avatar Mar 22 '25 20:03 cl3mcg

Have you tried rolling back to 2.5.2? 3.0.0+ is Tailwind 4 only.

jose-INCUE avatar Apr 01 '25 18:04 jose-INCUE