Is there a way to select a particular Bar in the Bar chart using user Interactions, and change the color of that particular bar as and when its selected?

[Gopi-Vuta]

Question

I would like to know how can I achieve the following requirement, Where I need to highlight the bar in the Bar graph that the user clicks/touches and make the color of it changed (to highlight it) and display the value of that Bar

Background Info/Attempts

I have tried the below logic, But it changes the whole graph color, as it doesnt know which bar to be highlighted I guess

const {state, isActive} = useChartPressState({ x: 'Tue 09', y: {y: 2}, }); const barColor = isActive ? '#8894FF' : '#E9ECF1';

---

`<Bar key={i} points={points.y} chartBounds={chartBounds} color={barColor} barWidth={20} roundedCorners={{ topLeft: 20, topRight: 20, bottomLeft: 20, bottomRight: 20, }} />

            {isActive ? `(<ToolTip` x={state.x.position} y={state.y.y.position} />) : null}`

[Valli-]

@Gopi-Vuta any ideas? I'm trying to achieve this as well..

[Gopi-Vuta]

Hey @Valli- Nope not from this library, I was not able to achieve this scenario using the library and since its a spike that we are doing and in the initial stage of adopting the library we had to move to a different library all together.

[zibs]

This should be possible: https://commerce.nearform.com/open-source/victory-native/docs/cartesian/guides/custom-bars, as well as you can run the example app in this repo, and look at this example: https://github.com/FormidableLabs/victory-native-xl/blob/main/example/app/bar-charts-custom-bars.tsx