I am trying to create a multi-colored bar chart using Uber's react-vis library. However, I am encountering an issue where the leftmost bar of the chart is overflowing below the YAxis instead of remaining contained to the right of it.
You can view the example on this REPL https://codepen.io/anon/pen/mozzeE?editors=0011
function Chart() {
const data = [1,2,3]
return <XYPlot
// xType="ordinal"
width={300}
height={300}
xDistance={100}
>
<HorizontalGridLines />
{data.map((n, k) => {
const y = data.length+5 - n
return <VerticalBarSeries
className="vertical-bar-series-example"
color={makeHexString()}
data={[
{x: n, y}
]}/>
})}
<YAxis />
</XYPlot>;
}