Points outside of chart area
const config = {
type: 'bar',
data,
options: {
layout: {
padding: {
top: 16
}
},
scale: {
y: {
beginAtZero: true,
max: 100,
min: 0
}
},
plugins: {
annotation: {
clip: false,
drawTime: 'afterDraw',
annotations: {
annotation1,
annotation2
}
}
}
}
};
const annotation1 = {
type: 'point',
backgroundColor: 'lime',
borderColor: 'black',
borderWidth: 1,
pointStyle: 'triangle',
radius: 15,
xValue: 3,
xScaleID: 'x',
yAdjust: 5,
yValue: 0,
yScaleID: 'y'
};
const annotation2 = {
type: 'point',
backgroundColor: 'lime',
borderColor: 'black',
borderWidth: 1,
pointStyle: 'triangle',
radius: 15,
rotation: 180,
xValue: 3,
xScaleID: 'x',
yAdjust: -5,
yValue: 100,
yScaleID: 'y'
};
const DATA_COUNT = 12;
const MIN = 10;
const MAX = 100;
Utils.srand(8);
const numberCfg = {count: DATA_COUNT, min: MIN, max: MAX};
const data = {
labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'],
datasets: [{
data: Utils.numbers(numberCfg)
}, {
data: Utils.numbers(numberCfg)
}]
};