CODEWITHSUNDEEP
javascriptcssreactjsreact-vis
Falieson
Falieson

Reputation: 2556

how to fix overflowing uber react-vis multi color barchart

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>;
}

Upvotes: 0

Views: 690

Answers (1)

Pavlo Zabaikin
Pavlo Zabaikin

Reputation: 26

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

Upvotes: 1

Related Questions