How to Color a Particular Bar in React Chart Component?

This article explains how to dynamically color a specific bar in a chart rendered using the React Chart
component. You can achieve this by using the pointRender event, which allows you to customize the appearance of individual data points based on your logic.

The pointRender event fires before each data point is rendered, giving you a chance to modify its appearance. The args.series.visiblePoints array contains all the data points that are visible in the chart.

In the example below, we compare the y values of the first two bars. If the first bar has a smaller value than the second, we change the color of the second bar to green using the interior property.

Code Example

const pointRender = (args) => {
   if (args.series.visiblePoints[0].y < args.series.visiblePoints[1].y) {
     args.series.visiblePoints[1].interior = 'green';
   }
 };
 return (
   <div className="control-pane">
         <ChartComponent
           id="charts"
           pointRender={pointRender.bind(this)}
         >
           <SeriesCollectionDirective>
             <SeriesDirective
               dataSource={data2}
               xName="x"
               yName="y"
               type="Bar"
               columnSpacing={0.1}
               name="Share in World's GDP"
               width={2}
             />
           </SeriesCollectionDirective>
         </ChartComponent>
       </div>
 ); 

Output

Live Sample

StackBlitz Sample

Conclusion

I hope you enjoyed learning about how to color a particular bar in React Chart component.

You can refer to our React Chart’s feature tour page to learn about its other groundbreaking feature representations. You can also explore our React Chart Documentation to understand how to present and manipulate data.

For current customers, you can check out our React components on the License and Downloads page. If you are new to Syncfusion, you can try our 30-day free trial to explore our React Chart and other React components.

If you have any queries or require clarifications, please let us know in the comments below. You can also contact us through our support forums, Direct-Trac or feedback portal, or the feedback portal. We are always happy to assist you!