Skip to content
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

How to add gradient color? #33

Closed
bdthemes opened this issue Jan 25, 2022 · 3 comments
Closed

How to add gradient color? #33

bdthemes opened this issue Jan 25, 2022 · 3 comments

Comments

@bdthemes
Copy link

Is it possible to add gradient color support for the progress bar?

@simeydotme
Copy link
Owner

hmmm, @bdthemes ... not totally sure.
Let me look into it, but it's not going to be a high priority.

If you have a code example, or a patch you want to submit for review, please go ahead.

@simeydotme
Copy link
Owner

I took a look, and it appears that cannot simply apply gradients on to Stroke for SVG.
If you are familiar/skilled in CSS you may be able to apply a "gradient filter" over the chart by;

  • create a DIV
  • position it absolutely over the chart with css
  • apply an "multiply" blend mode in css
  • apply your conic-gradient in css
  • set the color of the donut to be mid-grey

@simeydotme
Copy link
Owner

Here's an example;

https://codepen.io/simeydotme/pen/wvPBJee

image

@simeydotme simeydotme pinned this issue Jan 26, 2022
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants