Breaking News: Grepper is joining You.com. Read the official announcement!

react native svg charts

maharshi choudhury answered on August 23, 2023 Popularity 8/10 Helpfulness 1/10

answer react native svg charts

react native svg charts

Comment

interface DecoratorProps {
    x: any
    y: any
    combinedData: {
        data: number[]
        svg: {
            stroke: string
            strokeWidth: number
        }
    }[]
}

const min = 1
const max = 10000000

const uniqueKey = (index: number): number => {
    return Math.floor(Math.random() * (max - min + 1)) + min + index
}

export const MultipleLinesChartDecorator = (props: Partial<DecoratorProps>) => {
    const { x, y, combinedData } = props as DecoratorProps

    return (
        <>
            {combinedData &&
            combinedData.map((item, index) => {
                return (
                    <Svg key={uniqueKey(index)}>
                        {item.data.map((value, index) => (
                            <Circle
                                key={uniqueKey(index)}
                                cx={x(index)}
                                cy={y(value)}
                                r={2.5}
                                stroke={'rgb(0, 0, 0)'}
                                fill={'white'}
                            />
                        ))}
                    </Svg>
                )
            })}
        </>
    )
}

Popularity 8/10 Helpfulness 1/10 Language javascript

Source: thewidlarzgroup.com

Tags: charts javascript react-native svg

Link to this answer
Share Copy Link

Contributed on Aug 23 2023

maharshi choudhury

0 Answers Avg Quality 2/10

react native svg charts

Contents

More Related Answers

react native svg charts

Grepper

Documentation

Social

Legal

Contact

Oops, You will need to install Grepper and log-in to perform this action.