Skip to content

Add ability to draw individual ReferenceLines for category axis in a BarChart #5262

Description

@jeisele-frontier

Do you want to request a feature or report a bug?

Feature request

What is the current behavior?

Currently, separate reference lines can be drawn accurately on a BarChart only if the axis it is parallel to is a number axis, as shown in this codesandbox (from this article). However, as mentioned in the comment in the codesandbox, this will not work if the axis parallel to the reference line is a category axis. This is because:

  • it draws from the center of one tick to the next if you use categories for the segment, instead of from the beginning of the bar to the end of the bar, resulting in an offset reference line like this. The goal is to have the reference line across only the "Floating Rate Securities" bar.
    image
  • as mentioned in the comment in the codesandbox, even if there were some way to offset the line to be centered correctly, there is no extra category to define where the last ReferenceLine segment should end (e.g., how do you define the y axis end segment for the reference line for "U.S. High Quality Bonds"?)

What is the expected behavior?

It would be nice to be able to put a ReferenceLine across each bar, maybe by making ReferenceLine a child component of Bar, or maybe by adding the ability to provide a prop to RefererenceLine like segment={{ x: 5, y: 'someExistingCategory' }}, where the line is automatically centered on the y category axis tick and is the same width as the bar (or slightly larger), and at the value specified by x.

Which versions of Recharts, and which browser / OS are affected by this issue? Did this work in previous versions of Recharts?

Using recharts 2.12.7

Metadata

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions