0👍
There is a plugin for chart.js called chartjs-plugin-annotation.js (It is also available on bower https://libraries.io/bower/chartjs-plugin-annotation)
Once you include that js file you can do something like:
var myChart = new Chart(document.getElementById("myChart"), {
type: 'bubble',
data: {
datasets:[
...
]
},
options:{
scales: {
yAxes: [{
...
}],
xAxes: [{
...
}],
},
annotation: {
annotations: [{
type: 'box',
// ID of the X scale to bind onto
xScaleID: 'x-axis-0',
// ID of the Y scale to bind onto
yScaleID: 'y-axis-0',
// Left edge of the box. in units along the x axis
xMin: 25,
// Right edge of the box
xMax: 40,
// Top edge of the box in units along the y axis
yMax: 20,
// Bottom edge of the box
yMin: 15,
// Stroke color
borderColor: 'red'
// Stroke width
borderWidth: 4,
}]
}
}
You will want to play around with the settings listed there but that will draw a rectangle for you.
- Chartjs-[MIXED CHART.JS]How do I manipulate the label of each chart's tooltips?
- Chartjs-Doughnut chart from Chart.js, custom legend and call of original handler not works as expected
Source:stackexchange.com