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 Double Series Data#

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

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#1C222B
activeIndexIndex of the currently active bar.number5
barBgBackground color of the bars.string#F0F3F9
barColorColor of the bars.string#1B4DFF
barRadiusRadius of the bar corners.Array[4,4,0,0]
barSizeSize of the bars.number32
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#1C222B
secondaryBarBgBackground color of the secondary bars.string#F0F3F9
secondaryBarColorColor of the secondary bars.string#3D4A5C
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.number600
XAxisDataKeyKey in the data array for the X-axis data.stringNone
YAxisDataKeyKey in the data array for the Y-axis data.stringNone
tooltipBtnStyleCustom style of the tooltip.stringNone


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