How to change the color of the bar based on click event

[prasannakulal16]

Hey @Abhinandan-Kushwaha
I want to change the color of the bar when i click on it.

const data = [
    {value: 50, xValue: '4AM'},
    {value: 80, xValue: '8AM'},
    {value: 90, xValue: '12AM'},
    {value: 70, xValue: '4PM'},
    {value: 70, xValue: '8PM'},
    {value: 70, xValue: '9AM'},
];

const topLabelComponent = item => {
       return (
           <View
               style={{
                   // width: GetDeviceSize(70),
                   // height: GetDeviceSize(60),
                   paddingHorizontal: GetDeviceSize(10),
                   paddingVertical: GetDeviceSize(8),
                   borderRadius: GetDeviceSize(8),
                   backgroundColor: COLORS.PrimaryBlack,
                   marginBottom: 4,
                   marginLeft: -20,
               }}>
               <Text
                   style={{
                       fontFamily: Fonts.PoppinsRegular.fontFamily,
                       color: COLORS.PrimaryWhite,
                       textAlign: 'center',
                   }}>
                   {item.xValue}
               </Text>
               <View
                   style={{
                       flexDirection: 'row',
                       alignItems: 'center',
                   }}>
                   <View>
                       <TimerIcon
                           width={GetDeviceSize(12)}
                           height={GetDeviceSize(12)}
                       />
                   </View>

                   <Text
                       style={{
                           fontFamily: Fonts.PoppinsSemiBold.fontFamily,
                           color: COLORS.PrimaryYellow,
                           // textAlign: 'center',
                           paddingLeft: GetDeviceSize(3),
                       }}>
                       {item.value} mins
                   </Text>
               </View>
           </View>
       );
   };
<BarChart
               data={data}
               height={100}
               // width={Dimensions.get('window').width}
               barBorderTopLeftRadius={4}
               barBorderTopRightRadius={4}
               yAxisTextStyle={{color: 'red'}}
               showYAxisIndices={false}
               hideYAxisText
               xAxisLabelTextStyle={{
                   color: COLORS.ThinGrey,
                   fontSize: GetDeviceSize(10),
                   fontFamily: Fonts.PoppinsSemiBold.fontFamily,
               }}
               xAxisLabelTexts={['4AM', '8PM', '12AM', '4PM', '8PM', '9AM']}
               renderTooltip={topLabelComponent}
               barStyle={{color: 'red'}}
               barWidth={GetDeviceSize(26)}
               yAxisColor={COLORS.Transparent}
               xAxisColor={COLORS.DividerGrey}
               barBorderColor={'green'}
               frontColor={COLORS.WarmBlue}
               yAxisExtraHeight={60}
               // rulesType={'solid'}
               hideRules
           />

Something like this -

[Abhinandan-Kushwaha]

Hi @prasannakulal16 👋

Thanks for requesting this feature. I will try to add it in the next release.

For now, you can make use of the onPress prop to achieve this.

onPress={(item, index) => {
  const newData = [...data];
  newData.forEach(dataItem => {
    dataItem.frontColor = 'blue'; // coloring the rest of the bars with the initial color - blue
  });
  newData[index].frontColor = 'lightgreen'; // coloring the selected bar with the a new color - lightgreen
  setData(newData);
}}

---

Here's your code, with modifications to achieve this-

const dataArray = [
  {value: 50, xValue: '4AM'},
  {value: 80, xValue: '8AM'},
  {value: 90, xValue: '12AM'},
  {value: 70, xValue: '4PM'},
  {value: 70, xValue: '8PM'},
  {value: 70, xValue: '9AM'},
];

const [data, setData] = useState(dataArray); // set the data in state, so that on clicking a bar, we can update it and re-render

const topLabelComponent = item => {
  return (
    <View
      style={{
        // width: GetDeviceSize(70),
        // height: GetDeviceSize(60),
        paddingHorizontal: 10,
        paddingVertical: 8,
        borderRadius: 8,
        backgroundColor: 'black',
        marginBottom: 4,
        marginLeft: -20,
      }}>
      <Text
        style={{
          color: 'white',
          textAlign: 'center',
        }}>
        {item.xValue}
      </Text>
      <View
        style={{
          flexDirection: 'row',
          alignItems: 'center',
        }}>
        <View>
          {/* <TimerIcon
                width={GetDeviceSize(12)}
                height={GetDeviceSize(12)}
            /> */}
        </View>

        <Text
          style={{
            color: 'yellow',
            // textAlign: 'center',
            paddingLeft: 3,
          }}>
          {item.value} mins
        </Text>
      </View>
    </View>
  );
};
return (
  <BarChart
    data={data}
    height={100}
    // width={Dimensions.get('window').width}
    barBorderTopLeftRadius={4}
    barBorderTopRightRadius={4}
    yAxisTextStyle={{color: 'red'}}
    showYAxisIndices={false}
    hideYAxisText
    xAxisLabelTextStyle={{
      color: 'gray',
      fontSize: 10,
    }}
    xAxisLabelTexts={['4AM', '8PM', '12AM', '4PM', '8PM', '9AM']}
    renderTooltip={topLabelComponent}
    barStyle={{color: 'red'}}
    barWidth={26}
    yAxisColor={'transparent'}
    xAxisColor={'gray'}
    barBorderColor={'green'}
    frontColor={'blue'}
    yAxisExtraHeight={60}
    // rulesType={'solid'}
    hideRules

    onPress={(item, index) => {
      const newData = [...data];
      newData.forEach(dataItem => {
        dataItem.frontColor = 'blue'; // coloring the rest of the bars with the initial color - blue
      });
      newData[index].frontColor = 'lightgreen'; // coloring the selected bar with the a new color - lightgreen
      setData(newData);
    }}
  />
);

The output is-

highlightBar.mov

[Abhinandan-Kushwaha]

Hi @prasannakulal16
Starting from version 1.4.2 we can directly update the style of a bar on press, without having to update the data array.
I have added 2 new props named focusBarOnPress and focusedBarConfig.
See focusedbarconfig

[prasannakulal16]

Hey Its worked as expected. Thanks for the quick response👍