Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[Linecharts] Style update + new default settings for missing values #2458

Closed
gvnmagni opened this issue Jun 7, 2024 · 1 comment · Fixed by #2525
Closed

[Linecharts] Style update + new default settings for missing values #2458

gvnmagni opened this issue Jun 7, 2024 · 1 comment · Fixed by #2525
Assignees

Comments

@gvnmagni
Copy link

gvnmagni commented Jun 7, 2024

Current default settings for timeseries (specifically linecharts) often generate charts that are not appealing nor readable, the following image shows a classic result that we are familiar with, when the timerange is set to Last 15 minutes and therefore the chances of having empty buckets are quite high.

Related issue elastic/kibana#186076

Current state
Screenshot 2024-06-07 at 15 26 38

While few considerations are being made on the time bucket intervals, there are few improvements that we can apply both on the style of linecharts and the default settings.

My suggestion would be to give users the possibility to customise the display of dots, giving them the following options:

  • Never > never display value dots
  • Always > always display dots, regardless of bucket size
  • Auto/Default > Display dots when buckets are wider than 40px (this would be our default option and it would need to be calibrated, maybe 40px isn't the perfect fit)

And connecting missing values with the Linear option as a standard behavior.

This way, the result would be similar to this:
Screenshot 2024-06-07 at 15 26 24


Style changes

In addition to these changes, it would be great to apply few updates on the visual appearance in order to improve readability.

Lines
stroke-width: 1px
linecap: round
linejoin: round

Dots
Diameter: 6px
Filled color, no stroke

Dots - Hover state (an additional dots gets superimposed on the original dot)
Diameter: 10px
Filled color, no stroke, opacity: 0.5
NOTE: this hover state should be applied to all points whenever when over on a bucket

Isolated points (visible only when dots are not displayed)
Diameter: 3px
Filled color, no stroke

This is the final look & feel that we are implementing:

Screenshot 2024-06-07 at 15 25 55 Screenshot 2024-06-07 at 15 25 29

Areachart

Same behavior would be applied to stacked-areacharts, the only thing that we will have to consider is how we want to set up options by default, since it could greatly affect the readability of a chart. A good example would be the following couple of images which shows the exact same data, but different settings make them look way different.

Screenshot 2024-06-05 at 16 56 23 Screenshot 2024-06-05 at 16 56 13
@gvnmagni gvnmagni self-assigned this Jun 7, 2024
@gvnmagni
Copy link
Author

gvnmagni commented Jun 7, 2024

This additional issue will update the style of gridlines and it is related: #2459

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging a pull request may close this issue.

3 participants