React-vis: Zoomable chart / xDomain chart overflow

[acoll]

When you use the xDomain to "zoom" in a chart, the path overflows the chart region.

Notice in the zoomable example:
https://uber.github.io/react-vis/examples/charts/zoomable-chart

See on the left how the lines "overflow" into the y axis.

[targos]

I use the Borders component to fix this. Example:

<XYPlot
    width={800}
    height={600}
    xDomain={xDomain}
>
    {series.map((serie) => <LineSeries
        key={serie.id}
        data={serie.data}
        color={serie.color}
    />)}
    <Borders style={{all: {fill: '#fff'}}} />
    <XAxis />
    <YAxis />
</XYPlot>

[acoll]

Cool. Yea that solves the problem for me.

Should we close this?

[toddmedema]

Following up here - ran into the same issue. Would be great to intuitively fix this rather than expect everyone to apply a hack :) (it also doesn't entirely work, as it was chopping off things near the top and bottom edges of the chart, and only setting padding on the left side resulted in ugly black borders on the other three sides)

[notargetbg]

Using borders component didn't work for me. This issue is still ongoing...

[richardgoater]

Agreed that this issue is ongoing, looks as though the chart takes into account the axes when it is not zoomed, but when it is zoomed the axes are forgotten.

[sharynneazhar]

The border hack worked for me but it matters where you place it in your code. Regardless, I do agree that there should be a better solution than this hack. 🙈 Perhaps a prop someone can pass in to enable or disable overflow?

[mcnuttandrew]

I would accept a PR adding a prop to the highlight component that constrains it to be within the margins. Something like stayInsideMargins={true/false}