Chart.js Line chart fixed tooltip

Question

is it possible to call a default on-canvas tooltip at a fixed datalabel position without hovering the mouse?

[chartjs-plugin-datalabels](https://chartjs-plugin-datalabels.netlify.app/) would probably be the cleanest way to do this. — Jesper, Oct 14 '21 at 07:35

score 1 · Accepted Answer · answered Oct 14 '21 at 08:16

You can dispatch hover events as in this example, got from this answer:

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chart.js@3.0.0/dist/chart.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-datalabels@2.0.0"></script>
<button id="a">Hover a</button>
<button id="b">Hover b</button>
<button id="c">Hover c</button>
<button id="d">Hover d</button>
<button id="e">Hover all</button>
<canvas id="chart"></canvas>
<script>
  let c = new Chart($("#chart"), {
    type: "doughnut",
    data: {
      labels: ["a", "b", "c", "d"],
      datasets: [
        {
          data: [1, 2, 4, 8],
          backgroundColor: ["red", "blue", "green", "orange"]
        }
      ]
    }
  });
  console.log("chart drawn!");
  $("#a").on("click", function () {
    t(0);
  });
  $("#b").on("click", function () {
    t(1);
  });
  $("#c").on("click", function () {
    t(2);
  });
  $("#d").on("click", function () {
    t(3);
  });
  $("#e").on("click", function () {
    hoverAll();
  });

  function t(idx) {
    var meta = c.getDatasetMeta(0),
      rect = c.canvas.getBoundingClientRect(),
      point = meta.data[idx].getCenterPoint(),
      evt = new MouseEvent("mousemove", {
        clientX: rect.left + point.x,
        clientY: rect.top + point.y
      }),
      node = c.canvas;
    node.dispatchEvent(evt);
  }

  function hoverAll() {
    for (let i = 0; i < 4; i++) {
      console.log(i);
      t(i);
    }
  }
</script>

But, hover events seems to be mutually exclusive, meaning that you have only one at once, because there is only one mouse that can hover over one element once at a time. That is why the added hoverall button does not work, and leaves the last one hovered element. If you want all the datasets and records of your chart displayed, the datalabels plugin seems the way to go, as suggested in the comments.

Hi, this is a bit tricky, because hides the native mouse event, but at a time it looks the best solution for my need, thank you. I've also checked the datalabels plugin and didn't find the way to display a signle tooltip at position without any event. — meridbt, Oct 14 '21 at 09:00

LeeLenalee · Answer 2 · 2021-10-14T10:36:38.283

You can use the setActiveElements function like so:

const options = {
  type: 'line',
  data: {
    labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
    datasets: [{
        label: '# of Votes',
        data: [12, 19, 3, 5, 2, 3],
        borderColor: 'pink',
        backgroundColor: 'pink'
      },
      {
        label: '# of Points',
        data: [7, 11, 5, 8, 3, 7],
        borderColor: 'orange',
        backgroundColor: 'orange'
      }
    ]
  },
  options: {}
}

const ctx = document.getElementById('chartJSContainer').getContext('2d');
const chart = new Chart(ctx, options);

document.getElementById("tt").addEventListener("click", () => {
  const {
    tooltip,
    chartArea
  } = chart;

  tooltip.setActiveElements([{
      datasetIndex: 0,
      index: 1
    },
    {
      datasetIndex: 1,
      index: 1
    }
  ]);

  chart.update();
});

<body>
  <button id="tt">
      Make tooltip active
    </button>
  <canvas id="chartJSContainer" width="600" height="400"></canvas>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.5.1/chart.js"></script>
</body>

Chart.js Line chart fixed tooltip

2 Answers2