diff --git a/docs/configuration/tooltip.md b/docs/configuration/tooltip.md index 2a2f372df6c..35f2e291fa3 100644 --- a/docs/configuration/tooltip.md +++ b/docs/configuration/tooltip.md @@ -163,10 +163,10 @@ The tooltip items passed to the tooltip callbacks implement the following interf ```javascript { // Label for the tooltip - label: number | string, + label: string, // Value for the tooltip - value: number | string, + value: string, // X Value of the tooltip // (deprecated) use `value` or `label` instead diff --git a/src/core/core.tooltip.js b/src/core/core.tooltip.js index 1c260f3e9fc..a3757e2047a 100644 --- a/src/core/core.tooltip.js +++ b/src/core/core.tooltip.js @@ -217,8 +217,8 @@ function createTooltipItem(element) { return { xLabel: xScale ? xScale.getLabelForIndex(index, datasetIndex) : '', yLabel: yScale ? yScale.getLabelForIndex(index, datasetIndex) : '', - label: indexScale ? indexScale.getLabelForIndex(index, datasetIndex) : '', - value: valueScale ? valueScale.getLabelForIndex(index, datasetIndex) : '', + label: indexScale ? '' + indexScale.getLabelForIndex(index, datasetIndex) : '', + value: valueScale ? '' + valueScale.getLabelForIndex(index, datasetIndex) : '', index: index, datasetIndex: datasetIndex, x: element._model.x, diff --git a/test/specs/core.tooltip.tests.js b/test/specs/core.tooltip.tests.js index a994b4ac214..df8ce9ca6dd 100755 --- a/test/specs/core.tooltip.tests.js +++ b/test/specs/core.tooltip.tests.js @@ -704,64 +704,73 @@ describe('Core.Tooltip', function() { })); }); - it('Should have dataPoints', function() { - var chart = window.acquireChart({ - type: 'line', - data: { - datasets: [{ - label: 'Dataset 1', - data: [10, 20, 30], - pointHoverBorderColor: 'rgb(255, 0, 0)', - pointHoverBackgroundColor: 'rgb(0, 255, 0)' - }, { - label: 'Dataset 2', - data: [40, 40, 40], - pointHoverBorderColor: 'rgb(0, 0, 255)', - pointHoverBackgroundColor: 'rgb(0, 255, 255)' - }], - labels: ['Point 1', 'Point 2', 'Point 3'] - }, - options: { - tooltips: { - mode: 'single' + ['line', 'bar', 'horizontalBar'].forEach(function(type) { + it('Should have dataPoints in a ' + type + ' chart', function() { + var chart = window.acquireChart({ + type: type, + data: { + datasets: [{ + label: 'Dataset 1', + data: [10, 20, 30], + pointHoverBorderColor: 'rgb(255, 0, 0)', + pointHoverBackgroundColor: 'rgb(0, 255, 0)' + }, { + label: 'Dataset 2', + data: [40, 40, 40], + pointHoverBorderColor: 'rgb(0, 0, 255)', + pointHoverBackgroundColor: 'rgb(0, 255, 255)' + }], + labels: ['Point 1', 'Point 2', 'Point 3'] + }, + options: { + tooltips: { + mode: 'single' + } } - } - }); + }); - // Trigger an event over top of the - var pointIndex = 1; - var datasetIndex = 0; - var meta = chart.getDatasetMeta(datasetIndex); - var point = meta.data[pointIndex]; - var node = chart.canvas; - var rect = node.getBoundingClientRect(); - var evt = new MouseEvent('mousemove', { - view: window, - bubbles: true, - cancelable: true, - clientX: rect.left + point._model.x, - clientY: rect.top + point._model.y - }); + // Trigger an event over top of the element + var pointIndex = 1; + var datasetIndex = 0; + var meta = chart.getDatasetMeta(datasetIndex); + var point = meta.data[pointIndex]; + var node = chart.canvas; + var rect = node.getBoundingClientRect(); + var evt = new MouseEvent('mousemove', { + view: window, + bubbles: true, + cancelable: true, + clientX: Math.round(rect.left + point._model.x), + clientY: Math.round(rect.top + point._model.y) + }); - // Manually trigger rather than having an async test - node.dispatchEvent(evt); + // Manually trigger rather than having an async test + node.dispatchEvent(evt); - // Check and see if tooltip was displayed - var tooltip = chart.tooltip; + // Check and see if tooltip was displayed + var tooltip = chart.tooltip; - expect(tooltip._view instanceof Object).toBe(true); - expect(tooltip._view.dataPoints instanceof Array).toBe(true); - expect(tooltip._view.dataPoints.length).toEqual(1); - expect(tooltip._view.dataPoints[0].index).toEqual(pointIndex); - expect(tooltip._view.dataPoints[0].datasetIndex).toEqual(datasetIndex); - expect(tooltip._view.dataPoints[0].xLabel).toEqual( - chart.data.labels[pointIndex] - ); - expect(tooltip._view.dataPoints[0].yLabel).toEqual( - chart.data.datasets[datasetIndex].data[pointIndex] - ); - expect(tooltip._view.dataPoints[0].x).toBeCloseToPixel(point._model.x); - expect(tooltip._view.dataPoints[0].y).toBeCloseToPixel(point._model.y); + expect(tooltip._view instanceof Object).toBe(true); + expect(tooltip._view.dataPoints instanceof Array).toBe(true); + expect(tooltip._view.dataPoints.length).toBe(1); + + var tooltipItem = tooltip._view.dataPoints[0]; + + expect(tooltipItem.index).toBe(pointIndex); + expect(tooltipItem.datasetIndex).toBe(datasetIndex); + var indexLabel = type !== 'horizontalBar' ? 'xLabel' : 'yLabel'; + expect(typeof tooltipItem[indexLabel]).toBe('string'); + expect(tooltipItem[indexLabel]).toBe(chart.data.labels[pointIndex]); + var valueLabel = type !== 'horizontalBar' ? 'yLabel' : 'xLabel'; + expect(typeof tooltipItem[valueLabel]).toBe('number'); + expect(tooltipItem[valueLabel]).toBe(chart.data.datasets[datasetIndex].data[pointIndex]); + expect(typeof tooltipItem.label).toBe('string'); + expect(tooltipItem.label).toBe(chart.data.labels[pointIndex]); + expect(typeof tooltipItem.value).toBe('string'); + expect(tooltipItem.value).toBe('' + chart.data.datasets[datasetIndex].data[pointIndex]); + expect(tooltipItem.x).toBeCloseToPixel(point._model.x); + expect(tooltipItem.y).toBeCloseToPixel(point._model.y); + }); }); it('Should not update if active element has not changed', function() {