Bar Chart - Keep React
Table of Contents#
- Default Bar Chart
- Chart with X and Y Axis Data
- Bar Chart With Double Series Data
- API Reference
- Reference
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.
| Property | Description | Type | Default |
|---|---|---|---|
| active | Determines if the bar chart is active. | boolean | false |
| activeColor | Color of the active bars. | string | #1C222B |
| activeIndex | Index of the currently active bar. | number | 5 |
| barBg | Background color of the bars. | string | #F0F3F9 |
| barColor | Color of the bars. | string | #1B4DFF |
| barRadius | Radius of the bar corners. | Array | [4,4,0,0] |
| barSize | Size of the bars. | number | 32 |
| chartData | Array of data for the chart. | Array | Array |
| dataKey | Key in the data array for the primary data. | string | price |
| height | Height of the chart. | number | 250 |
| inActiveColor | Color of the inactive bars. | string | #1C222B |
| secondaryBarBg | Background color of the secondary bars. | string | #F0F3F9 |
| secondaryBarColor | Color of the secondary bars. | string | #3D4A5C |
| secondaryDataKey | Key in the data array for the secondary data. | string | sell |
| showBg | Determines if the chart background is visible. | boolean | false |
| showGridLine | Determines if grid lines are visible. | boolean | false |
| showLegend | Determines if the legend is visible. | boolean | false |
| showTooltip | Determines if tooltips are visible. | boolean | false |
| showXAxis | Determines if the X-axis is visible. | boolean | false |
| showYAxis | Determines if the Y-axis is visible. | boolean | false |
| width | Width of the chart. | number | 600 |
| XAxisDataKey | Key in the data array for the X-axis data. | string | None |
| YAxisDataKey | Key in the data array for the Y-axis data. | string | None |
| tooltipBtnStyle | Custom style of the tooltip. | string | None |
Reference#
To learn more about the Bar chart, please see the documentation of Recharts