Stripe BarChart

[thecodecafe]

Stripe BarChart Bars

It is possible to create a stripe bar chart link in the image below?

[Nandini910]

yup but I do not use react-native-svg-charts so if you are familiar with victory-native charts the below is a simple component VictoryBar imported from victory-native

<VictoryBar
                  barWidth={30}
                  data={data}
                  labels={({datum}) => `${datum.label}`}
                  dataComponent={<CustomRectangle/>}
/>

so dataComponent is a component which renders any specific component you want to render instead of default bar so I made a custom svg named CustomRectangle which has diagonal strips in it and passed it as dataComponent in VictoryBar CustomRectangle is as below in which Defs, Line, Pattern, Rect are imported from react-native-svg

function CustomRectangle(props) {
    const {x, y, y0, barWidth} = props;

    const height = y0 - y
    return(
        <>
            <Defs>
                <Pattern
                    id="stripes"
                    patternUnits="userSpaceOnUse"
                    patternContentUnits="userSpaceOnUse"
                    width="10"
                    height="10"
                    viewBox="0 0 10 10"
                >
                    <Line
                        x1="0"
                        y1="10"
                        x2="10"
                        y2="0"
                        stroke="#ffffff"
                        strokeWidth={2}
                    />
                    <Line
                        x1="5"
                        y1="15"
                        x2="15"
                        y2="5"
                        stroke="#ffffff"
                        strokeWidth={2}
                    />
                    <Line
                        x1="-5"
                        y1="5"
                        x2="5"
                        y2="-5"
                        stroke="#ffffff"
                        strokeWidth={2}
                    />
                </Pattern>
            </Defs>
            <Rect
                x={x - 15}
                y={y}
                width={barWidth}
                height={(height)}
                fill="#edb120"
            />
            <Rect
                x={x - 15}
                y={y}
                width={30}
                height={height}
                fill="url(#stripes)"
            />
        </>
    )
}

Hope this helps 🙂