Chartjs-Chart.js x-axis label duplicating on hover

by

0👍

Right, well I found the problem and the solution.
The root of the issue came about when my page refreshed and the chart would resize. I then tried the Chart.defaults.global.maintainAspectRatio= false;command which worked but duplicated the X-axis tick labels.

The problem: These two commands cannot work together. It causes the duplication on hover. 

Chart.defaults.global.responsive = true; 
Chart.defaults.global.maintainAspectRatio= false;

The solution: found in the chartjs.org documentation.
Detecting when the canvas size changes can not be done directly from the canvas element. Chart.js uses its parent container to update the canvas render and display sizes. However, this method requires the container to be relatively positioned and dedicated to the chart canvas only. Responsiveness can then be achieved by setting relative values for the container size (example):

<div class="chart-container" style="position: relative; height:40vh; width:80vw">
    <canvas id="chart"></canvas>
</div>

Note that in order for the above code to correctly resize the chart height, the maintainAspectRatio option must also be set to false.

I added the div’s to encase my canvas, changed the sizing and this fixed my problem 🙂

Leave a comment