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.

Sign up for GitHub

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

Jump to bottom

The gridline hides the horizontal axis #1203

Closed
markov00 opened this issue Jun 14, 2021 · 3 comments · Fixed by #1204 or elastic/kibana#102078
Closed

The gridline hides the horizontal axis #1203

markov00 opened this issue Jun 14, 2021 · 3 comments · Fixed by #1204 or elastic/kibana#102078
Labels
:axis Axis related issue bug Something isn't working good first issue Good for newcomers released Issue released publicly :styling Styling related issue :xy Bar/Line/Area chart related

Comments

@markov00
Copy link
Member

markov00 commented Jun 14, 2021 •
edited
Loading

Describe the bug
Axis are rendered before rendering the grids.
This causes a rendering problem: the X-axis will be every time overwritten by the lowest horizontal grid line style that is always rendered on top of the axis line.

To Reproduce
Steps to reproduce the behavior:

  1. Go to https://codesandbox.io/s/kind-fermat-hx7us?file=/src/App.tsx
  2. The gridline is enabled, the axis line stroke color is set to black but the gridline covers the axis line

Expected behavior
The gridlines should be rendered before rendering the axis so that the axis is more prominent and can be styled correctly.

Additional context
A similar effect is also visible on the Y-axis where the horizontal grid lines are rendered on top, creating a dashed effect on the Y-axis line

Screenshots
Screenshot 2021-06-14 at 11 19 27

Additional context
A VRT should be added
@markov00 markov00 added bug Something isn't working good first issue Good for newcomers :axis Axis related issue :styling Styling related issue :xy Bar/Line/Area chart related labels Jun 14, 2021
@ron-debajyoti
Copy link
Contributor

Hey @markov00 , I would like to take this up and try to solve this issue.

@markov00
Copy link
Member Author

markov00 commented Jun 15, 2021 •
edited
Loading

Hey @ron-debajyoti sure if you like to take that you are always welcome!
And thanks again for your contribution to the texture, it looks and works great!

This is probably a very easy task: just swapping the rendering sequence of axis and grid

@ron-debajyoti ron-debajyoti mentioned this issue Jun 15, 2021
Merged
markov00 pushed a commit that referenced this issue Jun 18, 2021
@ron-debajyoti
fix(xy): render gridlines behind axis (#1204)
38ebe2d 
The axis need to be rendered after the gridlines to avoid conflicts when using different colors/styles

fix #1203
nickofthyme pushed a commit that referenced this issue Jun 29, 2021
@semantic-release-bot
chore(release): 31.0.0 [skip ci]
597638a 
# [31.0.0](v30.2.0...v31.0.0) (2021-06-29)

### Bug Fixes

* **xy:** render gridlines behind axis  ([#1204](#1204)) ([38ebe2d](38ebe2d)), closes [#1203](#1203)
* memory leak related to re-reselect cache ([#1201](#1201)) ([02025cf](02025cf))
* **partition:** getLegendItemsExtra no longer assumes a singleton ([#1199](#1199)) ([100145b](100145b))

### Features

* **annotations:** option to render rect annotations outside chart ([#1207](#1207)) ([4eda382](4eda382))
* **heatmap:** enable brushing on categorical charts ([#1212](#1212)) ([10c3493](10c3493)), closes [#1170](#1170) [#1171](#1171)
* **xy:** add onPointerUpdate debounce and trigger options ([#1194](#1194)) ([a9a9b25](a9a9b25))

### BREAKING CHANGES

* **xy:** the `PointerOverEvent` type now extends `ProjectedValues` and drops value. This effectively replaces value with `x`, `y`, `smVerticalValue` and `smHorizontalValue`.
@nickofthyme
Copy link
Collaborator

🎉 This issue has been resolved in version 31.0.0 🎉

The release is available on:

Your semantic-release bot 📦🚀

@nickofthyme nickofthyme added the released Issue released publicly label Jun 29, 2021
@markov00 markov00 mentioned this issue Jun 29, 2021
Merged
1 task
AMoo-Miki pushed a commit to AMoo-Miki/OpenSearch-Dashboards that referenced this issue Feb 10, 2022
@semantic-release-bot
chore(release): 31.0.0 [skip ci]
bae925c 
# [31.0.0](elastic/elastic-charts@v30.2.0...v31.0.0) (2021-06-29)

### Bug Fixes

* **xy:** render gridlines behind axis  ([opensearch-project#1204](elastic/elastic-charts#1204)) ([bf9ccbd](elastic/elastic-charts@bf9ccbd)), closes [#1203](elastic/elastic-charts#1203)
* memory leak related to re-reselect cache ([opensearch-project#1201](elastic/elastic-charts#1201)) ([8cb6876](elastic/elastic-charts@8cb6876))
* **partition:** getLegendItemsExtra no longer assumes a singleton ([opensearch-project#1199](elastic/elastic-charts#1199)) ([ecbcc1e](elastic/elastic-charts@ecbcc1e))

### Features

* **annotations:** option to render rect annotations outside chart ([opensearch-project#1207](elastic/elastic-charts#1207)) ([ddffc00](elastic/elastic-charts@ddffc00))
* **heatmap:** enable brushing on categorical charts ([opensearch-project#1212](elastic/elastic-charts#1212)) ([5c426b3](elastic/elastic-charts@5c426b3)), closes [opensearch-project#1170](elastic/elastic-charts#1170) [opensearch-project#1171](elastic/elastic-charts#1171)
* **xy:** add onPointerUpdate debounce and trigger options ([opensearch-project#1194](elastic/elastic-charts#1194)) ([aa068f6](elastic/elastic-charts@aa068f6))

### BREAKING CHANGES

* **xy:** the `PointerOverEvent` type now extends `ProjectedValues` and drops value. This effectively replaces value with `x`, `y`, `smVerticalValue` and `smHorizontalValue`.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
:axis Axis related issue bug Something isn't working good first issue Good for newcomers released Issue released publicly :styling Styling related issue :xy Bar/Line/Area chart related
Projects
None yet
Milestone
No milestone
3 participants
@markov00 @nickofthyme @ron-debajyoti