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.