Bar Chart - Keep React
Table of Contents#
- Default Bar Chart
- Chart with X and Y Axis Data
- Bar Chart With Grid Lines
- Bar Chart With Double Series Data
- Customized Bar Size
- Customized Bar Size With Axis 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 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.
| Property | Description | Type | Default |
|---|---|---|---|
| active | Determines if the bar chart is active. | boolean | false |
| activeColor | Color of the active bars. | string | #1B4DFF |
| activeIndex | Index of the currently active bar. | number | 5 |
| barBg | Background color of the bars. | string | #E8EDFF |
| barColor | Color of the bars. | string | #1B4DFF |
| barRadius | Radius of the bar corners. | Array | [4,4,0,0] |
| barSize | Size of the bars. | number | 6 |
| 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 | #1B4DFF |
| secondaryBarBg | Background color of the secondary bars. | string | #D7FFEB |
| secondaryBarColor | Color of the secondary bars. | string | #1DB469 |
| 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 | 500 |
| 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 |
Reference#
To learn more about the Bar chart, please see the documentation of Recharts