BarChart interaction with chart.js

[Latulipe22]

Hi guys,
New chart.js user, I'm trying to create an interactive barchart with chart.js. Here is my basic chart :
` const ctx = document.getElementById("barChart").getContext("2d");

  const data = {
    labels: ["Bleu", "Jaune", "rouge"],
    datasets: [
      {
        label: "Bar Height",
        data: [0, 0, 0],
        backgroundColor: "rgba(52, 152, 219, 0.7)",
        borderColor: "black",
        borderWidth: { top: 2, right: 0, left: 0, bottom: 0 },
      },
    ],
  };

  const options = {
    scales: {
      x: {
        type: "linear",
        position: "bottom",
      },
      y: {
        min: 0,
        max: 10,
      },
    },
  };

  const barChart = new Chart(ctx, {
    type: "bar",
    data: data,
    options: {
      reponsevie: true,
      scales: {
        y: { beginAtZero: true },
      },
    },
  });`

I'd like to draw a black dot (or a black circle) on the middle of each top border.
Then, those dot will be clickable for the user to change the bar height.
Any idea how to do this ?

[stockiNail]

@Latulipe22 quickly, you could add another dataset (type line, hiding lines by showLine option).

See codepen: https://codepen.io/stockinail/pen/poYBevM

Otherwise you could create your own custom plugin to add circles to the top of the bar.

[Latulipe22]

Thanks for your reply, but I finally found the solution :
` <script>
const data = {
labels: ["Bleu", "Jaune", "Rouge"],
datasets: [
{
label: "Hauteur de la barre",
data: [0, 0, 0],
backgroundColor: "rgba(52, 152, 219, 0.7)",
borderColor: "black",
borderWidth: { top: 2, right: 0, left: 0, bottom: 0 },
},
],
};

  const options = {
    scales: {
      y: {
        min: 0,
        max: 10,
      },
    },
    plugins: {
      tooltip: {
        enabled: false,
      },
    },
  };

  const ctx = document.getElementById("barChart").getContext("2d");
  const barChart = new Chart(ctx, {
    type: "bar",
    data: data,
    options: options,
    plugins: [
      {
        tooltip: {
          enabled: false,
        },
        afterDraw: function (chart) {
          // Ajout d'un point sur chaque barre
          chart.data.datasets[0].data.forEach((value, index) => {
            var bar = chart.getDatasetMeta(0).data[index];
            var point = {
              x: bar.x,
              y: bar.y,
            };

            ctx.fillStyle = "black"; // Couleur du point
            ctx.beginPath();
            ctx.arc(point.x, point.y, 5, 0, 2 * Math.PI);
            ctx.fill();

            let isDragging = false;
            let lastUpdateY = 0;

            // Ajout d'un événement de clic sur chaque point
            ctx.canvas.addEventListener("mousedown", function (event) {
              const mouseX =
                event.clientX - ctx.canvas.getBoundingClientRect().left;
              const mouseY =
                event.clientY - ctx.canvas.getBoundingClientRect().top;

              if (
                mouseX > point.x - 5 &&
                mouseX < point.x + 5 &&
                mouseY > point.y - 5 &&
                mouseY < point.y + 5
              ) {
                isDragging = true;
                lastUpdateY = mouseY;
              }
            });

            // Ajout d'un événement de déplacement pendant le clic
            ctx.canvas.addEventListener("mousemove", function (event) {
              if (isDragging) {
                const mouseY =
                  event.clientY - ctx.canvas.getBoundingClientRect().top;
                  ctx.canvas.style.cursor = "grabbing";

                // Mettre à jour la hauteur de la barre seulement tous les 5 pixels déplacés
                if (Math.abs(mouseY - lastUpdateY) >= 1) {
                  chart.data.datasets[0].data[index] =
                    chart.scales.y.getValueForPixel(mouseY);
                  chart.update();
                  lastUpdateY = mouseY;
                }
              }
            });

            // Ajout d'un événement de relâchement du clic
            ctx.canvas.addEventListener("mouseup", function () {
              isDragging = false;
              ctx.canvas.style.cursor = "grab";
            });

            // Ajout d'un événement lorsque la souris entre sur le graphe
            ctx.canvas.addEventListener("mouseenter", function () {
              ctx.canvas.style.cursor = "grab"; // Main ouverte
            });

            // Ajout d'un événement lorsque la souris quitte le graphe
            ctx.canvas.addEventListener("mouseleave", function () {
              ctx.canvas.style.cursor = "default"; // Curseur par défaut
            });
          });
        },
      },
    ],
  });
</script>`

[stockiNail]

As written, you have created a custom plugin ;)