influxdata / influxdata/giraffe
Line graph coloring based on threshold
- Dominant language
- TypeScript
- Stars
- 189
- Forks
- 33
- Avg merge
- 3d 15h
- Merged PRs (30d)
- 4
Description
In a line graph, I would like to be able to set a threshold and having the line color change relative to the threshold, i.e. green when Y>0, red otherwise.
The only way i was able to achieve something similar was to split the data into different lines, based on the threshold.

Problem is, these lines are not connected between each others, resulting in empty areas on zooming, especially noticeable when values bounce above and below the threshold.


Manually connecting the lines this way would require forging "fake" datapoints right at threshold value for the line tho change color in the exact spot needed and it's not desirable.
Is there an easier way around this?
Contributor guide
Research direction
No files, tests, or entry points are identified in the issue, so first locate the line-graph rendering code and its test coverage in the repository. Done means a single line can change color at the threshold while remaining connected, including when values cross the threshold repeatedly and when the chart is zoomed.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- typescript
- Domain
- data-visualization
- Issue type
- Feature
- Difficulty
- 5/5
- Estimated time
- Over a week
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 35/100