i use chart js 4 and i need to add text to the horizontal line chart, i use with afterDraw but i had nothing
my code ts is like that :
createChart() {
const canavs = document.getElementById(‘MyChart’) as HTMLCanvasElement;
this.chart = new Chart('MyChart', {
type: 'bar', //this denotes tha type of chart
data: {
labels: [
'Jan',
'Fev',
'Mar',
'Avr',
],
datasets: [
{
label: 'Courbe 1',
data: [
[-5000, 35000],
[-20000, 50000],
[-2000, 30000],
],
barPercentage: 0.1,
borderColor: '#D37D7D',
backgroundColor: '#D37D7D',
borderWidth: 2,
borderRadius: 30,
borderSkipped: false,
order: 3,
},
{
label: 'Courbe 2',
data: [
20000, 25000, 30000, 15000, 10000, 0, -20000, -25000, -30000,
20000, 25000, 30000,
],
borderColor: '#ADD8E6',
backgroundColor: 'rgba(173,216,230,0.2)',
type: 'line',
order: 2,
pointBackgroundColor: 'white',
pointBorderColor: 'black',
borderWidth: 1,
},
{
label: 'courbe 3',
data: [
10000, 10000, 10000, 10000, 10000, 10000, 10000, 10000, 10000,
10000, 10000, 10000,
],
backgroundColor: '#D37D7D',
type: 'line',
pointStyle: 'line',
pointBorderColor: '#D37D7D',
borderColor: '#D37D7D',
borderWidth: 0.5,
order: 1,
},
],
},
options: {
plugins: {
legend: {
position: 'top',
align: 'end',
labels: {
filter: (l: any) => l.text !== 'Dataset 3',
usePointStyle: true,
pointStyle: 'circle',
boxWidth: 8,
fontSize: 10,
pointRadius: 1,
},
},
afterDraw: (chart: any) => {
let ctx = canavs.getContext('2d');
console.log('chart', chart);
if (chart.data.datasets[2]._meta[0]) {
ctx = chart.chart.ctx;
let meta = chart.getDatasetMeta(2);
let rect = meta.data[0]._model;
let x = rect.x - 20; // move to the left of the bar by 20 pixels
let y = rect.y - 10; // move up by 10 pixels
let radius = 19; // set the radius to 12 pixels
ctx.beginPath();
ctx.arc(x, y, radius, 0, 2 * Math.PI, false);
ctx.fillStyle = 'rgba(0,0,0,0.8)';
chart.data.datasets[2].forEach(function (dataset: any) {
for (let i = 0; i < dataset.data.length; i++) {
console.log(dataset);
if (dataset.type == 'line') {
let model =
dataset._meta[Object.keys(dataset._meta)[0]].data[i]
._model;
chart.ctx.fillText(dataset.name, model.x, model.y - 20);
}
}
});
ctx.fill();
ctx.lineWidth = 1;
ctx.strokeStyle = '#fff';
ctx.stroke();
ctx.fillStyle = '#fff';
ctx.font = '12px Arial';
ctx.fillText(
chart.config.options.scales.yAxes[2].scaleLabel.labelString,
x - 35,
y - 10
);
}
},
} as any,
scales: {
x: {
grid: {
display: false,
},
},
y: {
suggestedMin: -5000,
suggestedMax: 5000,
grid: {
display: false,
},
},
},
},
});
} what i need is that the horizontal chart start with text bordered with some color like what i have in the picture enter image description here
