Reversing startColor/endColor does not produce expected results about react-d3-speedometer HOT 7 CLOSED

@TrieBr This is the behaviour of d3.interpolateHsl. To quote d3 -

Returns an HSL color space interpolator between the two colors a and b. The colors a and b need not be in HSL; they will be converted to HSL using d3.hsl. 

I agree it is confusing. I will try to accomodate all the d3 interpolators - hcl, hsl, rgb etc so that users can select the interpolator of their choice, in upcoming versions.

from react-d3-speedometer.

Hi @TrieBr. Start and end color are not discrete colors to be swapped. They form the start and end of all the intermediate gradient colors. Internally, the colors are interpolated from start color to end color. For example, if you draw 1000 segments with start color as pink and end color as yellow, you will see a very fine grained scale gradually starting with start color and ending with end color. Internally, it uses d3 interpolate - https://github.com/d3/d3-interpolate#interpolate.

from react-d3-speedometer.

@palerdot Can you please further explain. You explained that the color will start at pink and then end at yellow. So I would expect if I swapped them then it would start at yellow and end at pink. But in this case its starting at yellow+1 shade to pink+1 shade

from react-d3-speedometer.

can you tell what you mean by yellow + 1 shade? do you have the color code and some kind of fiddle to show the shades you are describing?

from react-d3-speedometer.

Look at the screenshots. The first speedometer starts on a darker shade of green than the rightmost green on the second speedometer . Same with the other color. The first one ends one shade lighter (It doesn't include the dark red you see on the second one). It seems to me that if I use exactly opposite color ranges, then the speedometer's should have exactly the opposite color range, but that is not the case.

from react-d3-speedometer.

@TrieBr I could reproduce the issue you are mentioning. I'm reopening this to inspect if this is the behaviour of d3.interpolateHSL and update this issue.

from react-d3-speedometer.

@TrieBr There is a new option available in 0.6.0 version with segmentColors option/prop, with which we can give custom segment colors. This option gives more control over segment colors. Here is a sample sandbox - https://codesandbox.io/embed/relaxed-silence-c3qkb

from react-d3-speedometer.