diff --git a/src/plugins/plugin.tooltip.js b/src/plugins/plugin.tooltip.js index b39681ce2ca..8756eb03897 100644 --- a/src/plugins/plugin.tooltip.js +++ b/src/plugins/plugin.tooltip.js @@ -131,7 +131,8 @@ function createTooltipItem(chart, item) { return { chart, - label, + // If label is an array (multiline), join with ', ' for tooltip display + label: isArray(label) ? label.join(', ') : label, parsed: controller.getParsed(index), raw: chart.data.datasets[datasetIndex].data[index], formattedValue: value, diff --git a/test/specs/plugin.tooltip.tests.js b/test/specs/plugin.tooltip.tests.js index 94ae45b7246..26fab8821e5 100644 --- a/test/specs/plugin.tooltip.tests.js +++ b/test/specs/plugin.tooltip.tests.js @@ -1948,4 +1948,36 @@ describe('Plugin.Tooltip', function() { }] })); }); + + it('Should join multiline array labels with comma and space (issue #12049)', async function() { + var chart = window.acquireChart({ + type: 'bar', + data: { + datasets: [{ + label: 'Dataset 1', + data: [10, 20, 30], + }], + labels: [['Yellow', 'subTitle'], 'Point 2', 'Point 3'] + }, + options: { + plugins: { + tooltip: { + mode: 'index', + intersect: false, + } + } + } + }); + + var point = { + x: chart.chartArea.left + (chart.chartArea.right - chart.chartArea.left) / 6, + y: chart.chartArea.top + 5 + }; + + var tooltip = chart.tooltip; + await jasmine.triggerMouseEvent(chart, 'mousemove', point); + + // The title should show the label joined with ', ' not just ',' + expect(tooltip.title).toEqual(['Yellow, subTitle']); + }); });