I made a chart with the library chart.js, and next to the chart are the data numbers, so if I have a chart with the data of 150, it will display 150 next to the horizontal chart, but that number isn’t vector based, so I had to remove it and place an h2 “on top” of the canvas, so that its also vector based. Now I need to get the bar width so that I can correctly place my h2’s directly next to the bar graph.

The function createChart36Monate creates a chart for me, and inside the plugins I tried to get the with but it doesn’t work:

export function createChart36Monate(canvasId, containerClass, firstdata36Monate, secondData36Monate) {
    var labels = ["36 Monate"];
    var barColors1 = ["#348200"]; // Fill color for the first bar
    var barColors2 = ["#98CB35"]; // Fill color for the second bar
    var borderColors1 = ["#A3D33A"]; // Border color for the first bar
    var borderColors2 = ["#348200"]; // Border color for the second bar
    var valueRange36Monate = [0, firstdata36Monate[0] + secondData36Monate[0]]; // Min and max values for the x-axis
    var canvas = document.getElementById(canvasId); // Canvas for graphs
    var autobahnclusterDiv = document.querySelector(containerClass); // Projektcluster Div

    // Adjust the canvas width to match the "autobahn" div width
    if (autobahnclusterDiv) {
        canvas.width = autobahnclusterDiv.offsetWidth + 40; // Adjusting for some padding
        canvas.height = canvas.height - 11
    } else {
        console.log('No element with class "autobahn" found.');
    }

    // Create a new chart instance
    var chart = new Chart(canvas, {
        type: "horizontalBar",
        data: {
            labels: labels,
            datasets: [
                {
                    label: 'Graph1-36Monate',
                    backgroundColor: barColors1,
                    borderColor: borderColors1,
                    borderWidth: 1,
                    data: firstdata36Monate
                },
                {
                    label: 'Graph2-36Monate',
                    backgroundColor: barColors2,
                    borderColor: borderColors2,
                    borderWidth: 0.5,
                    data: secondData36Monate
                }
            ]
        },
        options: {
            responsive: false, // Make sure the chart is not responsive to fit the fixed dimensions
            maintainAspectRatio: false,
            legend: { display: false }, // Hides the legend
            scales: {
                xAxes: [{
                    ticks: {
                        display: false,
                        min: valueRange36Monate[0], // Use the first element of valueRange as the min value
                        max: valueRange36Monate[1]  // Use the second element of valueRange as the max value
                    },
                    gridLines: {
                        display: false,
                        drawOnChartArea: false,
                        drawTicks: false,
                        color: "transparent"
                    },
                    drawBorder: true,
                    borderColor: "transparent"
                }],
                yAxes: [{
                    gridLines: {
                        display: false,
                    },
                    drawBorder: true,
                    borderColor: "transparent"
                }]
            },
            plugins: {
                datalabels: {
                    display: false
                }
            },
            layout: {
                padding: {
                    right: 70, // Add padding to the right to prevent text cut off
                    left: 10
                }
            }
        },
        plugins: [
            {
                afterDraw: function(chart) {
                    var meta = chart.getDatasetMeta(0);
                    var width = meta.data[0]._model.height;
                    console.log(width)
                    console.log(meta)
            }
            
        }]
    });

    // Generate IDs for value elements based on the chartCounter
    var valueId1 = `value${chartCounter}_1`;
    var valueId2 = `value${chartCounter}_2`;

    // Update the corresponding <h2> elements with the chart values
    document.getElementById(valueId1).innerText = firstdata36Monate[0];
    document.getElementById(valueId2).innerText = secondData36Monate[0];

    // Increment the chartCounter for the next call
    chartCounter++;
}

I already tried _model.widt, but that just gives me an undefined.