Question

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();

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

LEAVE A COMMENT Hủy