themesberg / themesberg/flowbite
Flowbite Default CSS for ApexCharts Tooltips Not Functioning for Range Area Charts
Nobody has claimed this yet.
- Dominant language
- HTML
- Stars
- 9.4k
- Forks
- 862
- PR merge metrics
- No merged PRs in 30d
Description
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)
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start in plugin.js, where Flowbite's ApexCharts tooltip CSS selectors are defined, and compare the existing selectors with the .apexcharts-tooltip-rangebar class shown in the issue. Reproduce a rangeArea chart with tooltips enabled, then verify that its tooltip styling matches the existing styled chart tooltips.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- css, javascript, tailwindcss
- Domain
- frontend
- Issue type
- Bug
- Difficulty
- 2/5
- Estimated time
- 1-3 hours
- Activity status
- Stale
- Clarity
- Clearly specified
- Newbie friendliness
- 55/100