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',