palerdot / react-d3-speedometer

React Speedometer component using d3.js ⚛️
https://palerdot.in/react-d3-speedometer/
MIT License
230 stars 57 forks source link

How to add a linear gradient color to needle #167

Open GehanPasindhu opened 1 year ago

GehanPasindhu commented 1 year ago

I want to make a custom needle color like this and add some background. Can I do it?

image

palerdot commented 1 year ago

It is not possible right now.

In future, planned way to handle custom needle requirements is to allow user to provide custom html markup as a function like

customNeedleMarkup={() => {
   return `
     <div class="my-custom-needle">
         <svg></svg>
     </div>
   `
}}

One minor problem with this approach is custom html markup parsing might raise errors is security scanning tools. That is one of the reasons, this feature is not priotized or planned.

GehanPasindhu commented 1 year ago

To where should i pass this markup?

palerdot commented 1 year ago

To where should i pass this markup?

This is not possible right now.

It is not actively prioritized and worked on. This is an example of how things might look like if this enhancement lands sometime in the future.

GehanPasindhu commented 1 year ago

Thanks for the update.

palerdot commented 1 year ago

I'm keeping this issue open for future reference, so that new issues are not created for needle customization.