Chartjs-ChartJS – zIndex value for points/tooltips?

by

1👍

There is no plugin hook that notifies between a line and point draw, so best you can do is use the beforeDatasetsDraw hook to draw it in. By default the tooltip only uses the afterDraw hook to draw the tooltip so you will need to manually add the beforeDatasetsDraw hook to the Tooltip and set it to what used to be the afterDraw hook and make that an empty function like so:

Chart.Tooltip.beforeDatasetsDraw = Chart.Tooltip.afterDraw;
Chart.Tooltip.afterDraw = () => {}

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'
      },
      {
        label: '# of Points',
        data: [7, 11, 5, 8, 3, 7],
        borderColor: 'orange'
      }
    ]
  },
  options: {
  }
}

const ctx = document.getElementById('chartJSContainer').getContext('2d');
new Chart(ctx, options);
<body>
  <canvas id="chartJSContainer" width="600" height="400"></canvas>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.6.2/chart.js"></script>
</body>

Leave a comment