Skip to content

The gridline hides the horizontal axis  #1203

@markov00

Description

@markov00

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

Metadata

Metadata

Assignees

No one assigned

    Labels

    :axisAxis related issue:stylingStyling related issue:xyBar/Line/Area chart relatedbugSomething isn't workinggood first issueGood for newcomersreleasedIssue released publicly

    Type

    No type
    No fields configured for issues without a type.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions