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