Chart.js/test/fixtures/core.tooltip/point-style.js
Dan Manastireanu 6869a41d40
feat: Draw tooltips with point styles. Closes #7774 (#7972)
* feat: Draw tooltips with point styles. Closes #7774

* chore: Add tooltip usePointStyle docs

* chore: Add tests and visual tests for tooltip usePointStyle

* chore: Update typescript with tooltip usePointStyle
2020-10-29 22:55:40 +02:00

74 lines
1.4 KiB
JavaScript

const pointStyles = ['circle', 'cross', 'crossRot', 'dash', 'line', 'rect', 'rectRounded', 'rectRot', 'star', 'triangle'];
function newDataset(pointStyle, i) {
return {
label: '',
data: pointStyles.map(() => i),
pointStyle: pointStyle,
pointBackgroundColor: '#0000ff',
pointBorderColor: '#00ff00',
showLine: false
};
}
module.exports = {
config: {
type: 'line',
data: {
datasets: pointStyles.map((pointStyle, i) => newDataset(pointStyle, i)),
labels: pointStyles.map(() => '')
},
options: {
legend: false,
title: false,
scales: {
x: {display: false},
y: {display: false}
},
elements: {
line: {
fill: false
}
},
tooltips: {
mode: 'nearest',
intersect: false,
usePointStyle: true,
callbacks: {
label: function() {
return '\u200b';
}
}
},
layout: {
padding: 15
}
},
plugins: [{
afterDraw: function(chart) {
var canvas = chart.canvas;
var rect = canvas.getBoundingClientRect();
var point, event;
for (var i = 0; i < pointStyles.length; ++i) {
point = chart.getDatasetMeta(i).data[i];
event = {
type: 'mousemove',
target: canvas,
clientX: rect.left + point.x,
clientY: rect.top + point.y
};
chart._handleEvent(event);
chart.tooltip.handleEvent(event);
chart.tooltip.draw(chart.ctx);
}
}
}]
},
options: {
canvas: {
height: 256,
width: 512
}
}
};