New Product!SaaSify - Animated Landing Page Template built with Next.js, Tailwind, Shadcn UI, ReUI & MagicUI Components
Preview SaaSify

ApexCharts burger with "download" dropdown not customized


Hello,
the ApexCharts have a burger with dropdown "Download as svg" / "Download as png" / "Download as csv" for most of the charts, see
But in the dark theme the css is not customized, so the text in the dropdown isnt visible.
It's probably not fixed for light mode either, but at least there it's visible happy

Thanks


Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(

Replies (3)


You're right, the ApexCharts download dropdown isn’t styled properly for dark themes. The text becomes nearly invisible, which really affects usability. I ran into the same issue while working on a chart for a project related to fast-food data. The quick fix is to override the styles manually using CSS. You can target .apexcharts-menu and its children to adjust background color and font color to suit the dark mode. It’s a small tweak but improves the experience a lot. If you're curious how I implemented it while working on a Whataburger menu comparison, check this. The visuals are based on real-time data and needed full dropdown functionality. Let me know if you’d like help with the CSS code!



It's always frustrating when small UI issues affect usability, especially in dark mode. I’ve run into similar problems with different platforms, and a quick CSS tweak usually does the trick. If you're into online gaming, I’d suggest checking out best online casino Canada . They offer a solid range of casino games with smooth performance and engaging features. The platform is well-optimized, ensuring a seamless experience across different devices.



Hi,

Thank you for your feedback.

We will fix this issue in the next v8.1.9 in the coming days.

In the meantime you can fix it by editing src/sass/vendors/plugins/_apexcharts.scss and set background for the apexcharts mene background color as shown below


.apexcharts-menu {
background: var(--#{$prefix}body-bg) !important;
}


Regards.


Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(
Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(