Skip to content

fix(legend): apply dataset borderDash when pointStyle is line (#12291) - #12294

Open
vaibhavmashal wants to merge 1 commit into
chartjs:masterfrom
vaibhavmashal:fix/legend-pointstyle-line-borderdash
Open

fix(legend): apply dataset borderDash when pointStyle is line (#12291)#12294
vaibhavmashal wants to merge 1 commit into
chartjs:masterfrom
vaibhavmashal:fix/legend-pointstyle-line-borderdash

Conversation

@vaibhavmashal

Copy link
Copy Markdown

Fixes #12291

Description

When \usePointStyle: true\ with \pointStyle: 'line'\ is used in legend labels, the legend line segment should inherit and render with the dataset's \�orderDash\ and \�orderDashOffset\ pattern. Previously, only the color and width were inherited while the dash pattern was ignored.

Solution

  • Updated \drawPointLegend\ in \src/helpers/helpers.canvas.ts\ to accept \lineDash\ and \lineDashOffset\ in \DrawPointOptions\ and configure them on the canvas context when \pointStyle === 'line'.
  • Added \getLegendItemStyle\ in \src/plugins/plugin.legend.js\ to resolve line style properties from the dataset when \pointStyle === 'line'\ and pass them into the legend items and drawing options.
  • Added unit tests in \ est/specs/helpers.canvas.tests.js\ and \ est/specs/plugin.legend.tests.js\ verifying that dashed datasets render with their dash pattern in the legend.

Copilot AI lite review requested due to automatic review settings September 2, 2026 16:09

Copilot AI left a comment

Copy link
Copy Markdown

Choose a reason for hiding this comment

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

🟢 Approval recommended

The changes correctly address the legend dash inheritance bug and include targeted unit tests, with only minor optional performance tweaks suggested in review comments.

Pull request overview

Fixes legend rendering for usePointStyle: true with pointStyle: 'line' so the legend’s line symbol inherits the dataset’s dash pattern (borderDash / borderDashOffset), aligning legend output with dataset line styling.

Changes:

  • Extended drawPointLegend to accept/apply lineDash and lineDashOffset when rendering pointStyle: 'line'.
  • Updated legend label generation to resolve line-cap/join/dash properties from the dataset style when needed and pass them into the point-style drawing options.
  • Added unit tests covering both the helper behavior and the legend integration.
File summaries
File Description
src/helpers/helpers.canvas.ts Adds dash/offset support to DrawPointOptions and applies dash state for legend line point-style rendering.
src/plugins/plugin.legend.js Resolves dataset line dash/cap/join for pointStyle: 'line' and forwards dash settings into drawPointLegend.
test/specs/helpers.canvas.tests.js Adds a unit test verifying drawPointLegend sets dash and dash offset for pointStyle: 'line'.
test/specs/plugin.legend.tests.js Adds an integration test asserting dashed datasets produce dashed legend line symbols.
Review details

Suppressed comments (1)

src/plugins/plugin.legend.js:698

  • After updating getLegendItemStyle to accept a pre-resolved style, pass the style computed in generateLabels to avoid resolving the same style twice per dataset.
        return chart._getSortedDatasetMetas().map((meta) => {
          const style = meta.controller.getStyle(usePointStyle ? 0 : undefined);
          const borderWidth = toPadding(style.borderWidth);
          const lineStyle = getLegendItemStyle(meta, usePointStyle, pointStyle);

  • Files reviewed: 4/4 changed files
  • Comments generated: 1
  • Review effort level: Lite

💡 Add a code-review agent skill or configure MCP servers for context-aware, tailored reviews. Learn more in the docs.

Comment on lines +594 to +605
function getLegendItemStyle(meta, usePointStyle, pointStyle) {
const style = meta.controller.getStyle(usePointStyle ? 0 : undefined);
const resolvedPointStyle = pointStyle || style.pointStyle;
const datasetStyle = usePointStyle && resolvedPointStyle === 'line' ? meta.controller.getStyle() : {};
return {
pointStyle: resolvedPointStyle,
lineCap: valueOrDefault(style.borderCapStyle, datasetStyle.borderCapStyle),
lineDash: valueOrDefault(style.borderDash, datasetStyle.borderDash),
lineDashOffset: valueOrDefault(style.borderDashOffset, datasetStyle.borderDashOffset),
lineJoin: valueOrDefault(style.borderJoinStyle, datasetStyle.borderJoinStyle),
};
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Legend pointStyle: 'line' does not apply dataset borderDash pattern

2 participants