Skip to content

fix: add legend support to Bar chart #103

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
timqian wants to merge 1 commit into
base: master
Choose a base branch
from
Open

fix: add legend support to Bar chart #103

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
21 changes: 21 additions & 0 deletions src/Bar.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@ import scaleLinear from 'd3-scale/src/linear';

import addAxis from './utils/addAxis';
import addLabels from './utils/addLabels';
import addLegend from './utils/addLegend';
import Tooltip from './components/Tooltip';
import addFont from './utils/addFont';
import addFilter from './utils/addFilter';
Expand All @@ -26,6 +27,8 @@ class Bar {
fontFamily: 'xkcd',
strokeColor: 'black',
backgroundColor: 'white',
showLegend: true,
legendPosition: config.positionType.downRight,
...options,
};
if (title) {
Expand Down Expand Up @@ -168,6 +171,24 @@ class Bar {
},
});
});

// Add legend support
if (this.options.showLegend) {
const legendItems = this.data.datasets.map((dataset, j) => ({
color: this.options.dataColors[j],
text: `${dataset.label || ''}`,
Comment on lines +177 to +179
Copy link

Copilot AI Mar 23, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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}`,

Copilot uses AI. Check for mistakes.
}));

addLegend(graphPart, {
items: legendItems,
position: this.options.legendPosition,
unxkcdify: this.options.unxkcdify,
parentWidth: this.width,
parentHeight: this.height,
strokeColor: this.options.strokeColor,
backgroundColor: this.options.backgroundColor,
});
}
}

// TODO: update chart
Expand Down
Loading