Victory: VictoryLine gradient

Created on 30 Apr 2017  路  3Comments  路  Source: FormidableLabs/victory

Hey there - loving this project!

So far it has hit all my use cases... except one. I have a design requirement for a single line graph where the path changes color based on the current position

ex: _highest_ points of the graph would be green and _lowest_ would be red.

Closest example I could find of what I'm going for outlined here
gradient-line

I couldn't find anything about this in the docs so I'm assuming this is a feature request.

Thanks!

Most helpful comment

This is awesome--thanks, @joshuahenson, @icd2k3!

One small note to anyone else referencing this ticket: since a stroked horizontal line has no height, a linearGradient using objectBoundingBox geometry (default) won't render. If your dataset may include flat values, consider setting gradientAttributes='userSpaceOnUse' instead.

All 3 comments

I'm sure someone else can come up with something better but have a look at this JSFiddle for some ideas.

@joshuahenson this is perfect - thanks so much for your help! Closing this issue

This is awesome--thanks, @joshuahenson, @icd2k3!

One small note to anyone else referencing this ticket: since a stroked horizontal line has no height, a linearGradient using objectBoundingBox geometry (default) won't render. If your dataset may include flat values, consider setting gradientAttributes='userSpaceOnUse' instead.

Was this page helpful?
0 / 5 - 0 ratings

Related issues

iffy picture iffy  路  5Comments

pruhstal picture pruhstal  路  4Comments

AndresTIY picture AndresTIY  路  5Comments

timhwang21 picture timhwang21  路  4Comments

tylermassey picture tylermassey  路  5Comments