Is this possible using onPress event can change the bar chart's particular bars color or styles?

[EdisonDevadoss]

Can anyone please help me.

[horstleung]

import React from 'react';
import { LineChart, BarChart, Grid, YAxis, XAxis } from 'react-native-svg-charts';
import * as scale from 'd3-scale';

import * as shape from 'd3-shape';
import { Circle, G, Line, Rect, Text } from 'react-native-svg';
import { View, ScrollView } from 'react-native';

const data = [
	50,
	10,
	40,
	95,
	4,
	24,
	85,
	91,
	35,
	53,
	53,
	24,
	80,
	50,
	10,
	40,
	95,
	4,
	24,
	85,
	91,
	35,
	53,
	53,
	24,
	80,
	50,
	10,
	40,
	95,
	4,
	24,
	85,
	91,
	35,
	53,
	53,
	24,
	80,
	50,
	10,
	40,
	95,
	4,
	24,
	85,
	91,
	35,
	53,
	53,
	24,
	80,
	50,
	10,
	40,
	95,
	4,
	24,
	85,
	91,
	35,
	53,
	53,
	24,
	80
];

class LineChartView extends React.PureComponent {
	state = {
		scale: 1,
		detailItem: null
	};
	renderDetail(index, value, options) {
		this.setState({ detailItem: { index, value, ...options } });
	}
	render() {
		const { detailItem } = this.state;
		const barData = data.map((value, idx)=>{
			return {
				value: value,
				svg: (detailItem && idx === detailItem.index) ? {fill: 'green'} : undefined
			}
		})
		return (
			<View style={[ {flex: 1,  flexDirection: 'row' } ]}>
						<YAxis
							style={{ width: 15 }}
							scale={scale.scaleLinear}
							max={MAX}
							data={data}
							contentInset={contentInset}
							svg={{
								fill: 'grey',
								fontSize: 10
							}}
							numberOfTicks={10}
							formatLabel={(value) => `${value}`}
						/>
						<View style={{ flex: 1 }}>
							<BarChart
								contentInset={contentInset}
								style={{ flex: 1 }}
								data={barData}
								yAccessor={({ item }) => item.value}
								svg={{ fill: 'rgb(134, 65, 244)' }}
								xScale={scale.scaleBand}
							/>
							<XAxis
								data={data}
								formatLabel={(value, index) => index}
								contentInset={contentInset}
								scale={scale.scaleBand}
								svg={{
									fill: 'grey',
									fontSize: 10,
									fontWeight: 'bold',
									rotation: 20
								}}
							/>
						</View>
					</View>
		);
	}
}

export default LineChartView;

[RainFalling1]

import React from 'react'
import {View, Text} from 'react-native'
import {BarChart, Grid} from 'react-native-svg-charts'

class BarChartExample extends React.PureComponent {
  state = {
    selectItem: null,
  };

  render() {
    const data = [50, 10, 40, 95, 85, 20, 70];
    const newData = data.map(
      (item, index) => ({
        y: item,
        svg: {
          onPressIn: () => {
            console.warn(index);
            this.setState({
              selectItem: index
            })
          },
          onPressOut: () => {
            this.setState({
              selectItem: null
            })
          },
          fill: this.state.selectItem === index ? '#55C45E' : '#4B9DFB',
        }
      })
    );

    return (
      <View style={{flex: 1, height: 150}}>
        <BarChart
          style={{flex: 1, marginTop: 30}}
          data={newData}
          // svg={{fill: this.state.color,}}
          yAccessor={({item}) => item.y}
          contentInset={{top: 10, bottom: 10}}
          spacingInner={0.35}
          spacingOuter={0.3}
          gridMin={1}
        >
          {/*<Grid direction={Grid.Direction.VERTICAL}/>*/}
        </BarChart>
      </View>
    )
  }
}
export default BarChartExample

[CyxouD]

@RainCheese thank you, worked for me, but had to comment onPressOut function