react-vis: x with multiple y to display chart - reactjs

Question

I have a project that contains several interfaces, and among these interfaces there is an interface to display a set of statistics,
I am using react-vis library.
But the problem is that I want to display the values as shown in the image:
I have one x, y, and y1
The problem is that I have multiple Y values
How can I solve this problem?
import { CSSProperties, FunctionComponent } from 'react';
import {
XYPlot,
XAxis,
YAxis,
VerticalGridLines,
HorizontalGridLines,
VerticalBarSeries,
} from 'react-vis';
import { BaseChart } from './data/interfaces';
interface BarChartProps extends BaseChart {
colorValue?: string;
color?: string;
style?: CSSProperties;
barWidth?: number;
stroke?: string;
fill?: string;
}
const BarChart: FunctionComponent<BarChartProps> = ({
colorRange,
colorValue,
color,
data,
style,
barWidth,
width,
height,
stroke,
fill,
}) => {
console.log('datadfdfdf: ', data);
var yValues: any = data?.map((y, index) => {
console.log('ytr: ', y);
return y?.y;
})
var y1Values: any = data?.map((y1, index) => {
console.log('ytr1: ', y1?.y1);
return y1.y1;
})
console.log('yValues: ', yValues);
return (
<>
<XYPlot
margin={{ bottom: 30, left: 20, top: 15 }}
xType='ordinal'
width={width?width:450}
height={height}
>
<VerticalGridLines marginLeft={2} width={5} />
<HorizontalGridLines tickValues={yValues} />
<HorizontalGridLines tickValues={y1Values} />
<XAxis />
<YAxis tickValues={y1Values}
tickSize={12}/>
<VerticalBarSeries
_colorValue={colorValue ? colorValue : 'red'}
colorRange={
colorRange
? colorRange
: ['#005fff36', '#00800045', '#fafafa']
}
barWidth={barWidth ? barWidth : 0.3}
color={color ? color : 'yellow'}
fill={fill ? fill : '#C6E2DD'}
stroke={stroke ? stroke : '#55805045'}
width={6}
style={style}
data={data}
/>
</XYPlot>
</>
);
};
export default BarChart;

Answer 1

I solve my problem by update the code, the updated code from "the part that i added it" comment, just i duplicate YAxis and VerticalBarSeries:
import { CSSProperties, FunctionComponent, useEffect, useState } from 'react';
import {
XYPlot,
XAxis,
YAxis,
VerticalGridLines,
HorizontalGridLines,
VerticalBarSeries,
} from 'react-vis';
import { BaseChart } from '../data/interfaces';
interface BarChartProps extends BaseChart {
colorValue?: string;
color?: string;
style?: CSSProperties;
barWidth?: number;
stroke?: string;
fill?: string;
}
const BarChartMultiY: FunctionComponent<BarChartProps> = ({
colorRange,
colorValue,
color,
data,
style,
barWidth,
width,
height,
stroke,
fill,
}) => {
var yValues: any = data?.map((y, index) => {
return y?.y;
})
var y1Values: any = data?.map((y1, index) => {
return y1?.y1;
})
var topography: any[] = [];
const [xtopography, setXTopography] = useState<any[]>([])
useEffect(() => {
data?.map((xy, index) => {
let x: any = xy?.x;
let y: any = xy?.y1;
let xyData: any = { x: x, y: y }
topography.push(xyData);
setXTopography(topography)
return topography;
})
}, [data])
return (
<>
<XYPlot
margin={{ bottom: 30, left: 20, top: 20 }}
xType='ordinal'
width={width ? width : 450}
height={height}
>
<VerticalGridLines marginLeft={2} width={5} />
<HorizontalGridLines tickValues={yValues} />
<XAxis />
<YAxis tickValues={yValues}
tickSize={12} />
<VerticalBarSeries
_colorValue={colorValue ? colorValue : 'red'}
colorRange={
colorRange
? colorRange
: ['#005fff36', '#00800045', '#fafafa']
}
barWidth={barWidth ? barWidth : 0.3}
color={color ? color : 'yellow'}
fill={fill ? fill : '#C6E2DD'}
stroke={stroke ? stroke : '#55805045'}
width={6}
style={style}
data={data}
/>
{/* /// the part that i added it */}
<YAxis tickValues={y1Values}
tickSize={12} />
<VerticalBarSeries
_colorValue={colorValue ? colorValue : 'red'}
colorRange={
colorRange
? colorRange
: ['#005fff36', '#00800045', '#fafafa']
}
barWidth={barWidth ? barWidth : 0.3}
color={color ? color : 'yellow'}
fill={'#96DED1'}
stroke={stroke ? stroke : '#55805045'}
width={6}
style={style}
data={xtopography}
/>
</XYPlot>
</>
);
};
export default BarChartMultiY;
and this link help me also:
enter link description here