Interactive Bar Chart Component in React with TypeScript

This challenge focuses on building a reusable and interactive bar chart component in React using TypeScript. Creating such a component is a fundamental skill for data visualization and allows users to effectively represent and understand categorical data. The component should be flexible enough to handle different datasets and allow for basic user interaction like hovering to display more details.

Problem Description

You are tasked with creating a React component called BarChart that displays a bar chart based on provided data. The component should accept an array of data objects as a prop, where each object represents a bar and has at least two properties: label (string) and value (number). The component should render a series of bars, with the height of each bar proportional to its value.

Key Requirements:

• Data Input: The component must accept a data prop, which is an array of objects with label (string) and value (number) properties.
• Bar Rendering: Each bar should be rendered as a rectangular element. The height of the bar should be dynamically calculated based on the value property.
• Labels: Each bar should have its corresponding label displayed below it.
• Hover Effect: When the user hovers over a bar, the label and value should be displayed in a tooltip-like fashion (e.g., a small box appearing near the bar). The tooltip should disappear when the mouse leaves the bar.
• Styling: The component should have basic styling to make the chart visually appealing. You can use CSS or a CSS-in-JS library like styled-components (though plain CSS is preferred for this challenge).
• Responsiveness: The chart should be reasonably responsive, meaning it should adapt to different screen sizes without breaking. Consider using percentages for bar widths.

Expected Behavior:

• The component should render correctly with various datasets, including datasets with different value ranges.
• The hover effect should work smoothly and accurately display the label and value.
• The chart should be visually clear and easy to understand.
• The component should handle empty datasets gracefully (e.g., by displaying a message like "No data available").

Edge Cases to Consider:

• Empty Dataset: What should happen if the data prop is an empty array?
• Negative Values: How should negative values be handled? (Consider displaying them as bars extending downwards).
• Large Values: How should the chart handle very large values that might exceed the available space? (Consider scaling the values or truncating the bars).
• Zero Values: How should zero values be represented?

Examples

Example 1:

Input:
data = [
  { label: "A", value: 10 },
  { label: "B", value: 25 },
  { label: "C", value: 15 },
  { label: "D", value: 30 }
]

Output: A bar chart with four bars. Bar "A" is the shortest, bar "D" is the tallest. Hovering over "B" displays "B: 25".

Explanation: The bars are rendered proportionally to their values. The labels are displayed below each bar. The hover effect shows the label and value.

Example 2:

Input:
data = []

Output: A message "No data available" is displayed.

Explanation: The component handles the case where no data is provided.

Example 3:

Input:
data = [
  { label: "X", value: -5 },
  { label: "Y", value: 12 },
  { label: "Z", value: 0 }
]

Output: A bar chart with three bars. Bar "X" extends downwards, bar "Z" is at the baseline, and bar "Y" is above the baseline. Hovering over "X" displays "X: -5".

Explanation: Negative values are represented as bars extending downwards from the baseline.

Constraints

• Data Type: The data prop must be an array of objects. Each object must have a label property (string) and a value property (number).
• Bar Width: Each bar should occupy approximately 20% of the chart's width, leaving some space between bars.
• Chart Height: The chart's height should be dynamically determined based on the maximum value in the dataset. A reasonable scaling factor should be used to ensure the bars fit within the chart.
• Performance: The component should render efficiently, even with a large dataset (e.g., up to 50 bars). Avoid unnecessary re-renders.

Notes

• You can use any React styling approach you prefer (CSS, styled-components, etc.). Plain CSS is recommended for simplicity.
• Consider using React's useState hook to manage the hover state.
• Think about how to handle different screen sizes to ensure the chart remains responsive.
• Focus on creating a clean, reusable, and well-documented component.
• Error handling for invalid data types is not required for this challenge, but good coding practices are always encouraged.