How to design this graph?

[MarkJackson1997]

Question

Thanks for this cool library.
I want to design barchart with different color,add unfill color and need to hide y-axis label.Please check attached image for better understanding.Please help.I am stuck in this.

Background Info/Attempts

I checked this demo example but how to set dynamic color in this?and also want to hide y-axis label

<CartesianChart
xKey="day"
padding={10}
yKeys={["stars"]}
domainPadding={20}
axisOptions={{
font,
tickCount: 5,
lineColor: isDark ? "#71717a" : "#d4d4d8",
labelColor: isDark ? appColors.text.dark : appColors.text.light,
}}
data={DATA}
>
{({ points }) => {
return (
<>
{points.stars.map(({ x, y }) => {
return (
<React.Fragment key={point-${x}-${y}}>
<Points
points={calculateStarPoints(x, y ?? 0, 5, numPoints)}
mode="polygon"
color={shapeColor}
strokeCap="round"
strokeWidth={2}
/>
</React.Fragment>
);
})}
</>
);
}}

[ffoton]

Change tickCount: 5 to tickCount: { x: 5, y: 0 } to get rid of the ticks on the y axis.

I'm not quite sure why you are using a Points component? Please see this guide for a similar chart as your provided screenshot: https://commerce.nearform.com/open-source/victory-native/cartesian/guides/basic-bar-chart

[MarkJackson1997]

thanks @ffoton yes if i using y:0 then it will hide y axis,i am trying to set different colors and unfill color on bar for this i am checing example code.In that used Points component.
For better understanding please check attached image in question.
In that 2 different color on bar chart and also set unfill color gray.

Example code link:
https://github.com/FormidableLabs/victory-native-xl/blob/main/example/app/custom-drawing.tsx