How can I add value text after graph with chart.js

  Kiến thức lập trình

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 ):


<!DOCTYPE html>
<html lang="en">

    <meta charset="UTF-8">
    <title>Geon Presentation</title>

    <link rel="stylesheet" href="./style.css">
    <script src=""></script>
    <script src="[email protected]"></script>
    <script src="./squareGraph.js" defer></script>


    <div class="top-squares">
        <div class="square projektcluster">
            <img src="" alt="image">
            <div class="square-cluster"> 
                <h2 class="square-cluster-text">4</h5>
            <div class="square-projekte">
                <h2 class="square-cluster-text">57</h5>

            <div class="square-leistung">
                <h2 class="square-cluster-text">2.171</h5>

            <canvas id="myChart" style="width: 5%;" height="50"></canvas>






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;
, i) {
            var meta = chart.getDatasetMeta(i);
  , index) {
              var 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
  if (callback) callback(chart);
  return chart;

// Initial chart creation

New contributor

Raphael Zimmer is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.

Theme wordpress giá rẻ Theme wordpress giá rẻ Thiết kế website