How to implement gradient in react-d3-speedometer?
Closed this issue · 7 comments
Hi,
I have used this library and im trying to make the color shades to be a gradient. As the svg is generated by the component itself , i wasn't able to add linear gradients using css to the svg element. I'm aware that I can add through JS (i.e. document.getElementById's) but other than that any leads with this would help me. Any plan to implement gradients?
@Venmathi2510 I guess by gradients, you mean custom intermediate colors? Right now, there is no option to add custom intermediate colors to the segments. Not sure, if it will be added as a feature anytime soon.
@ No. I didn't mean the custom intermediate color. Now it is as n segments like we can differentiate the colors, instead we can provide an option to have segments to appear as gradient also. Please refer to the image below for better understanding.
We can Implement this by adding linear gradients to svg with the start and end colors. Could you plz help me out how I can modify this code base in my local and verify it in local. I'm able to pull the repo and make the changes. But not sure how to run & verify after installing the dependencies.
Thanks in Advance.
@Venmathi2510 Right now, there is a hack by increasing the number of segments to a large number like 1000 to get a gradient like effect. But, it will also show that many corresponding segment values. For eg - https://codesandbox.io/s/50n0oz20y4
I will leave this open and try to add a config like maxSegmentsValue that limits the segment value to be displayed. In that case, it can be used to limit the segment values that are displayed, while kind of getting a gradient like effect. But, I cannot confirm how soon this can happen.
@Venmathi2510 This feature is added in upcoming 0.5.0 release (which will be released shortly). You can check Live Example here -https://palerdot.in/react-d3-speedometer/?path=/story/react-d3-speedometer--gradient-effect-with-large-number-of-segments-and-maxsegmentlabels-config
v0.5.0 released which addresses an issue because of babel 7 runtime - https://www.npmjs.com/package/react-d3-speedometer/v/0.5.0. Please reopen if you face any issues.
Update: Please use latest 0.5.5 version which addresses babel7 runtime errors. A live example of correct package can be seen here - https://codesandbox.io/s/53wj7x516x
Please reopen if you face any issues with 0.5.x releases. As mentioned, please update to latest 0.5.5 version and see if this issue is addressed.