From a1a33cde3f9532a121d1670cd5c7b460a14fd98d Mon Sep 17 00:00:00 2001
From: Huzaifa Iftikhar <chhuzaifaiftikhar@gmail.com>
Date: Sat, 29 Aug 2026 22:34:45 +0500
Subject: [PATCH] use the dataset dash for the line point style in the legend

with usePointStyle the legend reads its style from the point scope and that scope has no borderDash on it so a line symbol always came out solid even when the dataset line was dashed. take the dash off the dataset element for the line point style only so markers like circle or rect keep drawing solid.
---
 src/plugins/plugin.legend.js      | 12 ++++--
 test/specs/plugin.legend.tests.js | 61 +++++++++++++++++++++++++++++++
 2 files changed, 70 insertions(+), 3 deletions(-)

diff --git a/src/plugins/plugin.legend.js b/src/plugins/plugin.legend.js
index 6ed99413536..49138ba2957 100644
--- a/src/plugins/plugin.legend.js
+++ b/src/plugins/plugin.legend.js
@@ -679,6 +679,12 @@ export default {
         return chart._getSortedDatasetMetas().map((meta) => {
           const style = meta.controller.getStyle(usePointStyle ? 0 : undefined);
           const borderWidth = toPadding(style.borderWidth);
+          const itemPointStyle = pointStyle || style.pointStyle;
+          // a line symbol stands for the dataset line but the point scope has no dash
+          // on it so read that off the dataset element instead, markers stay solid
+          const dashStyle = usePointStyle && itemPointStyle === 'line'
+            ? meta.controller.getStyle(undefined)
+            : style;
 
           return {
             text: datasets[meta.index].label,
@@ -686,12 +692,12 @@ export default {
             fontColor: color,
             hidden: !meta.visible,
             lineCap: style.borderCapStyle,
-            lineDash: style.borderDash,
-            lineDashOffset: style.borderDashOffset,
+            lineDash: dashStyle.borderDash,
+            lineDashOffset: dashStyle.borderDashOffset,
             lineJoin: style.borderJoinStyle,
             lineWidth: (borderWidth.width + borderWidth.height) / 4,
             strokeStyle: style.borderColor,
-            pointStyle: pointStyle || style.pointStyle,
+            pointStyle: itemPointStyle,
             rotation: style.rotation,
             textAlign: textAlign || style.textAlign,
             borderRadius: useBorderRadius && (borderRadius || style.borderRadius),
diff --git a/test/specs/plugin.legend.tests.js b/test/specs/plugin.legend.tests.js
index e0bed42c263..75b8e868081 100644
--- a/test/specs/plugin.legend.tests.js
+++ b/test/specs/plugin.legend.tests.js
@@ -189,6 +189,67 @@ describe('Legend block tests', function() {
     }]);
   });
 
+  it('should take the dataset dash for a line point style', function() {
+    var chart = window.acquireChart({
+      type: 'line',
+      data: {
+        labels: [],
+        datasets: [{
+          label: 'solid',
+          data: []
+        }, {
+          label: 'dashed',
+          borderDash: [6, 3],
+          borderDashOffset: 4,
+          data: []
+        }]
+      },
+      options: {
+        plugins: {
+          legend: {
+            labels: {
+              usePointStyle: true,
+              pointStyle: 'line'
+            }
+          }
+        }
+      }
+    });
+
+    expect(chart.legend.legendItems.map(function(item) {
+      return item.lineDash;
+    })).toEqual([[], [6, 3]]);
+    expect(chart.legend.legendItems.map(function(item) {
+      return item.lineDashOffset;
+    })).toEqual([0, 4]);
+  });
+
+  it('should leave other point styles solid', function() {
+    var chart = window.acquireChart({
+      type: 'line',
+      data: {
+        labels: [],
+        datasets: [{
+          label: 'dashed',
+          borderDash: [6, 3],
+          data: []
+        }]
+      },
+      options: {
+        plugins: {
+          legend: {
+            labels: {
+              usePointStyle: true,
+              pointStyle: 'circle'
+            }
+          }
+        }
+      }
+    });
+
+    expect(chart.legend.legendItems[0].lineDash).toBeUndefined();
+  });
+
   it('should reverse correctly', function() {
     var chart = window.acquireChart({
       type: 'line',