-
-
Notifications
You must be signed in to change notification settings - Fork 1.3k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Add a full dark theme #218
Comments
Thanks for the kind words! Maybe we can add |
Has this been released yet? Looking for an easy way to switch dark/light themes aswell, using with Vuetify atm. |
Not released yet, but coming soon. |
@junedchhipa any chance you can explain how to modify the charts to show properly when using vuetify dark mode? |
I abandoned this project so I'm not sure but I'm sure you can use: svg text {
fill: white;
} |
@steebchen May I know the reason why you abandoned? |
I meant I abandoned my own project, not using apexcharts (although that results in it). In general, it seems I'm quickly transitioning into Angular (100% Typescript, powerful testing, DI, intellisense, ...). |
Ah! thanks for clarifying! |
Ah well, good to know ;) Will definitely use it when I need charts in Angular! |
i want to add background image on the chart. Do anyone know how |
@bubuamu Please create a new ticket for it. |
I have changed the default dark color to |
Ok thank you very much for the quick response. I would like to put it transparent so that the background color is the same as the vuetify color.
Anyway, great job on that library. |
For those that came here, like myself or the previous comment, using other style means, such as e.g. material-design, put
in your css file somewhere (in case of an angular app, |
|
you can achieve this by this
|
what should we do If there is both theme dark and light what should we do for text color? |
This hack works with vuetify to show white text in dark mode. Place it inside the .theme--dark svg text {
fill: white !important;
}
.theme--dark .apexcharts-legend-text {
color: white !important;
fill: white !important;
} |
Did not work for me for |
For dark themes, there's the
tooltip.theme
option. It looks nice, but it would be very cool if the whole thing could have a dark mode.With some minor tweaks like setting the text color to white and adding dark colors to the menu, it could look like this
I would suggest to use a top-level
theme
(orchart.theme
) option, add a classdark
to.apexcharts-canvas
and style all other elements with css selectors accordingly.I could send a PR for this if my proposal seems like a good idea (although not in the next few days).
BTW, huge thanks to this project. The charts are so clean and even mobile touch "swiping" of the charts always renders the correct tooltip. This is so cool!
The text was updated successfully, but these errors were encountered: