Mutiple y axis value with same x axis in react vis graph

Question

I am using react-vis graph for generating histogram data. The graph works fine if we have individual entries for x and y axis. But it fails and looks distorted when we have same x axis value and multiple y axis value and vice versa.

Is there a way to deal with this kind of data?

I am using the following code to generate the graph

<XYPlot
                    xType='ordinal'
                    colorType={this.props.color}
                    width={charWidth}
                    height={charHeight}
                    yDomain={charDomain}
                    style={{
                        fontSize:'14px',
                        fontWeight:'400',
                        textAlign:'left'
                    }}>
                    {/* <HorizontalGridLines /> */}
                    <XAxis  hideLine = {false} style={{fontSize:'12px',fontWeight:'400'}} />
                    <YAxis  hideLine = {false}/>
                    {/* <XAxis  hideLine = {false} style={{fontSize:'12px',fontWeight:'400'}}/>
                    <YAxis />

                    <ChartLabel
                        text={this.props.xLabelTitle}
                        className="alt-y-label"
                        includeMargin={true}
                        xPercent={0.06}
                        yPercent={0.06}
                        style={{
                        transform: 'rotate(-90)',
                        textAnchor: 'end'
                        }}
                       /> */}
                    <VerticalBarSeries data={data} barWidth={this.props.barWidth} />
                    <LabelSeries
                        data={ data.map(obj =>{
                            return {...obj,label:obj.y.toString()}
                        })}
                        labelAnchorX="middle"
                        labelAnchorY="text-after-edge" 
                        style={{fontSize:'13px',fontWeight:'700'}}
                    />
                </XYPlot>