Vertical grouped bar chart of dynamic columns using react-vis - reactjs

Question

vertical grouped bar chart of dynamic columns using react-vis
the output using react-vis vertical bar
Expected output
<XYPlot
xType={chartData['type']}
width={width}
height={height}>
<VerticalGridLines style={gridLineStyle} />
<HorizontalGridLines style={gridLineStyle} />
<XAxis tickLabelAngle={xAxisAngle} style={tickStyle} tickFormat={chartData['type'] == 'linear' ? tick => this.formatNumber(tick) : null} />
<YAxis tickLabelAngle={yAxisAngle} style={tickStyle} tickFormat={tick => this.formatNumber(tick)} />
<ChartLabel
text={chartData['name']}
className="alt-x-label"
includeMargin={false}
xPercent={0.5}
yPercent={1.18}
style={{
fontWeight: 'bold',
textAnchor: 'middle',
fontSize: "12px",
fill: "#6b6b76",
fontFamily: "sans-serif"
}}
/>
<ChartLabel
text={'No. of variants'}
className="alt-y-label"
includeMargin={false}
xPercent={-0.02}
yPercent={0.5}
style={{
transform: 'rotate(-90)',
fontWeight: 'bold',
textAnchor: 'middle',
fontSize: "12px",
fill: "#6b6b76",
fontFamily: "sans-serif"
}}
/>
{hoveredNode && (
<Hint value={hoveredNode}>
<div style={{ background: '#000000' }}>
<p style={{ fontSize: "10px", padding: "3px", color: '#ffffff' }}>{`${hoveredNode.y} variants with ${chartData['name']} of ${hoveredNode.x}`}</p>
</div>
</Hint>
)}
<BarSeries data={A} />
<BarSeries data={C} />
<BarSeries data={G} />
<BarSeries data={T} />
</XYPlot>
I get three 3 bars but there is always one fourth empty bar. Which is not needed. Any suggestion would be helpful. Thanks