CODEWITHSUNDEEP
chart.js
lowkeynicc
lowkeynicc

Reputation: 1

ChartJS - zIndex value for points/tooltips?

Working with a line chart on ChartJS. When you hover over a point on the chart and the tooltip appears, is there a way to edit the layering (essentially zIndex value) so the tooltip would appear behind the graph point?

Basically, I want this tooltip to go behind the circle instead of like this.

Upvotes: 0

Views: 1436

Answers (1)

LeeLenalee
LeeLenalee

Reputation: 31421

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>

Upvotes: 1

Related Questions