rExtent for multiAxis OrdinalFrame applies to all axes and doesn't work with negative values

[rconjaerts]

When the multiAxis attribute is set to true on an OrdinalFrame, we should be able to set the rExtent for each axis separately. I also can't get it to work properly with negative values, so I hope this has to do with the multiAxis and rExtent part.

Heres an example of data that should result in a Bar & Line chart where the axes goes below 0, but that's not what we are getting at all.

const data = [ { sales: 7000, leads: 100000, month: "2020-01-01" }, { sales: -8000, leads: 45000, month: "2020-02-01" }, { sales: -4000, leads: 50000, month: "2020-03-01" }, { sales: 2000, leads: -200000, month: "2020-04-01" }, { sales: 3000, leads: -175000, month: "2020-05-01" }, { sales: -5000, leads: 125000, month: "2020-06-01" }, { sales: 5000, leads: -150000, month: "2020-07-01" } ]

If I removed the rExtent attribute from the frameProps I get the following (ignore all the different styling, it has no influence on it). You can see that the axes aren't correct, and neither are the bar charts. They should start from 0, and go lower. Now some of them are gone, others are actually above 0 even though they have a negative value.

If I added an rExtent of [0] Here the linegraph will go much lower, outside of the screen, axes don't follow. To be expected since we set the minimum to 0. So the line is actually drawn correcly.

If I set the rExtent manually to the min/max of sales [-8000, 7000] or of leads [-200000, 125000], I get the exact same result:

When I was working with negative values for the waterfall chart, and XYFrame I was able to make it work after some investigating, but here I don't really have a clue what to do. I would expect us to be able to set an rExtent for both axis when multiAxis is true, and that the axes would actually follow the rExtent which isn't the case at the moment. One of the better results was removing the rExtent variable, but there we still have the issue that the ticks don't follow correctly, and that there are issues with the bar chart.

Do you have any idea what we could do to overcome this issue? If you need more info, just let me know.

[emeeks]

Interesting, I hadn't thought of that. I'll try to dig into this this week.

[emeeks]

This is fixed in 2.0.0-rc.12 but you have to use a slightly different method to make the bar charts work with custom icons for charts that go into the negative:

          customMark: d => {
            if (d.rIndex === 1) {
              return <circle r={6} fill={"rgba(0, 162, 206)"} />
            }

            let height = 0
            let y = 0

            if (d.negative) {
              height = d.y - d.base
              y = -height
            } else {
              height = d.base - d.y
            }
            return (
              <rect
                height={height}
                width={20}
                x={-10}
                y={y}
                fill="rgba(179, 51, 29)"
              />
            )
          }