influxdata / influxdata/giraffe

Line graph coloring based on threshold

Open
#757 0 comments 1 reaction 0 assignees View on GitHub
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.

![immagine](https://user-images.githubusercontent.com/48163376/170549865-381a7839-be7c-4d0c-86f1-95d881c80e92.png)

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.

![immagine](https://user-images.githubusercontent.com/48163376/170550664-e5218e61-bd12-45ed-988a-74192595ae9a.png)
![immagine](https://user-images.githubusercontent.com/48163376/170550689-05e561f5-47b5-4919-b88b-47f82a1fa4f4.png)

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

Open the contributing 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.