I tried to add the value text that’s stored in the var data1, and var data2 after the two graphs, but it won’t show, I tried to solve this issue with the plugin “afterDatasetsDraw”.
What “afterDatasetsDraw” should do:
It should fetch the two values from data1[0] and data2[0] and add them after the graphs with the text ‘MWp’ after and adjust the position a bit.
What “afterDatasetsDraw” does:
Nothing ):
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Geon Presentation</title>
<link rel="stylesheet" href="./style.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
<script src="./squareGraph.js" defer></script>
</head>
<body>
<h3>GEON PROJEKTPOTENTIAL</h3>
<h1>Heiligengrabe</h1>
<div class="top-squares">
<div class="square projektcluster">
<h4>PROJEKTCLUSTER</h4>
<img src="" alt="image">
<div class="square-cluster">
<h6>CLUSTER</h4>
<h2 class="square-cluster-text">4</h5>
</div>
<div class="square-projekte">
<h6>PROJEKTE</h6>
<h2 class="square-cluster-text">57</h5>
</div>
<div class="square-leistung">
<h6>LEISTUNG</h6>
<h2 class="square-cluster-text">2.171</h5>
</div>
<canvas id="myChart" style="width: 5%;" height="50"></canvas>
</div>
</div>
</body>
</html>
JAVASCRIPT:
var labels = ["18 Monate"];
var data1 = [229]; // Data for the first bars
var data2 = [1175]; // Data for the second bars
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 valueRange = [0, data1[0] + data2[0]]; // Min and max values for the x-axis
var canvas = document.getElementById('myChart'); // Canvas for graphs
var projektclusterDiv = document.querySelector('.projektcluster'); // Projektcluster Div
// Function to create and return the chart
function createChart(callback) {
// Adjust the canvas width to match the "projektcluster" div width
if (projektclusterDiv) {
canvas.width = projektclusterDiv.offsetWidth - 50; // Adjusting for some padding
console.log('Width of the "projektcluster" div:', projektclusterDiv.offsetWidth, 'pixels');
console.log('New canvas width:', canvas.width, 'pixels');
} else {
console.log('No element with class "projektcluster" found.');
}
// Create a new chart instance
var chart = new Chart(canvas, {
type: "horizontalBar",
data: {
labels: labels,
datasets: [
{
label: 'Graph1-18Monate',
backgroundColor: barColors1,
borderColor: borderColors1,
borderWidth: 2,
data: data1
},
{
label: 'Graph2-18Monate',
backgroundColor: barColors2,
borderColor: borderColors2,
borderWidth: 2,
data: data2
}
]
},
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: valueRange[0], // Use the first element of valueRange as the min value
max: valueRange[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
}
},
plugins: [{
afterDatasetsDraw: function(chart) {
var ctx = chart.chart.ctx;
chart.data.datasets.forEach(function(dataset, i) {
var meta = chart.getDatasetMeta(i);
meta.data.forEach(function(bar, index) {
var data = dataset.data[index];
ctx.fillStyle = 'black';
ctx.font = 'bold 12px Arial';
ctx.fillText(data + ' MWp', bar._model.x + 10, bar._model.y + 4);
});
});
}
}]
}
});
// Execute the callback after the chart is rendered
chart.update();
if (callback) callback(chart);
return chart;
}
// Initial chart creation
createChart();
New contributor