Limited lines
const config = {
type: 'line',
data,
options: {
scale: {
y: {
beginAtZero: true,
max: 120,
min: 0
}
},
plugins: {
annotation: {
drawTime: 'beforeDraw',
annotations: {
annotation1,
annotation2,
annotation3
}
}
}
}
};
const annotation1 = {
type: 'line',
borderColor: 'green',
borderDash: [6, 6],
borderWidth: 3,
label: {
enabled: true,
backgroundColor: 'lightGreen',
borderRadius: 0,
color: 'green',
content: 'Summer time'
},
xMax: 8,
xMin: 5,
xScaleID: 'x',
yMax: 110,
yMin: 110,
yScaleID: 'y'
};
const annotation2 = {
type: 'line',
borderColor: 'green',
borderDash: [6, 6],
borderWidth: 1,
xMax: 5,
xMin: 5,
xScaleID: 'x',
yMax: 0,
yMin: 110,
yScaleID: 'y'
};
const annotation3 = {
type: 'line',
borderColor: 'green',
borderDash: [6, 6],
borderWidth: 1,
xMax: 8,
xMin: 8,
xScaleID: 'x',
yMax: 0,
yMin: 110,
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)
}]
};