Chartjs-Chart.js scale xaxis with date, strange renderer

by

0👍

✅

Update your Chart.js version to 3.0.0 or above instead of 2.7.1, works well in updated versions.

see the example below which is made on Chart.js version 3.0.0.

Note: below is a simple line chart example.

const ctx = document.getElementById("tests-chart");
const data =[
  { x: "24/03/2022", y: 20 },
  { x: "25/03/2022", y: 5 },
  { x: "24/06/2022", y: 10 },
  { x: "25/06/2022", y: 5 }
 ];

const testsChart = new Chart(document.getElementById("tests-chart"), {
        type: 'line',
        data: {
            datasets: [{ 
                data: data,
                label: "Value array",
                borderColor: "#3e95cd",
                pointRadius: 3,
                pointHoverRadius: 3,
                fill: false
                }
            ]
        },
    });
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.0.0/chart.min.js"></script>
<div>
  <canvas id="tests-chart"></canvas>
</div>

Leave a comment