fix: add legend support to Bar chart

[timqian]

Problem

Bar chart component was missing legend support, while other chart types (Line, Pie, Radar, StackedBar, XY) all have it. This causes legends to not show up for bar charts.

Solution

• Import the existing addLegend utility
• Add showLegend (default: true) and legendPosition (default: downRight) options
• Render legend with dataset labels and colors, matching the pattern used in other chart types

Changes

• Modified src/Bar.js:
  • Added import for addLegend utility
  • Added legend options to constructor defaults
  • Added legend rendering logic at the end of render() method

Testing

The legend should now appear on bar charts when showLegend is true (default).

Fixes #101

[Copilot]

Pull request overview

Adds legend rendering support to the Bar chart so it can display a legend similarly to other chart types in the library (addressing missing legend behavior reported in #101).

Changes:

• Import and invoke the existing addLegend utility from src/utils/addLegend.js.
• Add new Bar chart options: showLegend (default true) and legendPosition (default downRight).
• Build legend items and render the legend at the end of Bar.render().

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

[Copilot]

Bar currently renders only the first dataset (this.data.datasets[0]), and colors bars by label index (dataColors[i] on hover). The new legend builds items from dataset index (datasets.map(... dataColors[j])), so for the common Bar usage (single dataset without a label) the legend will show a blank item and its color won’t correspond to bar colors. Either (a) build legend items from data.labels (matching Bar’s per-bar color scheme), or (b) update Bar rendering to support multiple datasets with consistent per-dataset colors and then keep the dataset-based legend.

Suggested change

	const legendItems = this.data.datasets.map((dataset, j) => ({
	color: this.options.dataColors[j],
	text: `${dataset.label || ''}`,
	const legendItems = this.data.labels.map((label, i) => ({
	color: this.options.dataColors[i],
	text: `${label}`,