react-vis: x with multiple y to display chart

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;

score 0 · Accepted Answer · answered Jan 29 '23 at 13:09

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

react-vis: x with multiple y to display chart

1 Answers1