how to fix overflowing uber react-vis multi color barchart

Question

I'm trying to make a multi colored bar chart with uber's react-vis library. The issue I'm having is that the left most bar chart overflows underneath the YAxis instead of being contained to the right of it.

You can check out 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>;
}

Answer 1

For who ever will straggle with this: You need to specify xDomain for XYPlot with like: xDomain={[min_X_value, max_X_value]}

Where min_X_value, max_X_value - your minimum and maximum values for X