flowbite
flowbite copied to clipboard
Flowbite Default CSS for ApexCharts Tooltips Not Functioning for Range Area Charts
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:
- Initialize a chart with a type of
rangeArea - In the option object, setup the tooltips to be enabled:
tooltip: {
enabled: true,
x: {
show: true,
},
y: {
show: true,
},
},
- 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)
No styles applied on complex charts (does not work on complex Range Area Charts)
+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
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.
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.
Have you tried rolling back to 2.5.2? 3.0.0+ is Tailwind 4 only.