Bar Chart - Keep React

The Bar Chart component provides a visual representation of data through bars of varying lengths. It's a graphical representation commonly used to display and compare the values of different categories or groups. The Bar Chart component is highly customizable and can be tailored to fit various data visualization needs.

Table of Contents#

Default Bar Chart#

Get started with a simple and clean bar chart that provides essential data representation.

Chart with X and Y Axis Data#

Learn how to populate your bar chart with custom data for both the X and Y axes.

Bar Chart With Grid Lines#

Enhance your data visualization by adding grid lines to your bar chart.

Bar Chart With Double Series Data#

Discover how to create a bar chart with multiple data series for more detailed insights.

Customized Bar Size#

Learn to customize the size of individual bars in your chart for better visual impact.

Customized Bar Size With Axis Data#

Combine customized bar size with specified axis data for a tailored chart appearance.

API Reference#

Explore the comprehensive set of props and options available for the Bar Chart component.

activeDetermines if the bar chart is active.booleanfalse
activeColorColor of the active bars.string#1B4DFF
activeIndexIndex of the currently active bar.number5
barBgBackground color of the bars.string#E8EDFF
barColorColor of the bars.string#1B4DFF
barRadiusRadius of the bar corners.Array[4,4,0,0]
barSizeSize of the bars.number6
chartDataArray of data for the chart.ArrayArray
dataKeyKey in the data array for the primary data.stringprice
heightHeight of the chart.number250
inActiveColorColor of the inactive bars.string#1B4DFF
secondaryBarBgBackground color of the secondary bars.string#D7FFEB
secondaryBarColorColor of the secondary bars.string#1DB469
secondaryDataKeyKey in the data array for the secondary data.stringsell
showBgDetermines if the chart background is visible.booleanfalse
showGridLineDetermines if grid lines are visible.booleanfalse
showLegendDetermines if the legend is visible.booleanfalse
showTooltipDetermines if tooltips are visible.booleanfalse
showXaxisDetermines if the X-axis is visible.booleanfalse
showYaxisDetermines if the Y-axis is visible.booleanfalse
widthWidth of the chart.number500
XAxisDataKeyKey in the data array for the X-axis data.stringNone
YAxisDataKeyKey in the data array for the Y-axis data.stringNone


To learn more about the Bar chart, please see the documentation of Recharts