Chartjs-Chart.js – Line data on the chart do not match their dates

by

0👍

✅

You probably want to adjust interaction options, see the docs. To achieve what I think is your desired behavior, you’ll have to set:

  • options.interaction.axis to ‘x’
  • options.interaction.intersect to false
  • and leave options.interaction.mode: ‘nearest’ (default)

Here’s a small snippet with one data point "missing" from each dataset:

const chartData = [{
    label: "Avg. Price",
    type: "line",
    borderColor:'#fff',
    backgroundColor:'#fff',
    data: [
        {
            date: new Date("3/08/2023").valueOf(),
            value: 21.2,
        },
        {
            date: new Date("3/09/2023").valueOf(),
            value: 23.2,
        },
        {
            date: new Date("3/11/2023").valueOf(),
            value: 13.5,
        },
        {
            date: new Date("3/12/2023").valueOf(),
            value: 15,
        }
    ]
},
{
    label: "Floor Price",
    type: "line",
    borderColor:'#a4d',
    backgroundColor:'#a4d',
    data: [
        {
            date: new Date("3/08/2023").valueOf(),
            value: 11.2,
        },
        {
            date: new Date("3/10/2023").valueOf(),
            value: 12.1,
        },
        {
            date: new Date("3/11/2023").valueOf(),
            value: 23,
        },
        {
            date: new Date("3/12/2023").valueOf(),
            value: 21,
        }
    ]
},
{
    label: "Volume",
    type: "bar",
    backgroundColor: '#00d',
    data: [
        {
            date: new Date("3/08/2023").valueOf(),
            value: 14,
        },
        {
            date: new Date("3/09/2023").valueOf(),
            value: 19,
        },
        {
            date: new Date("3/10/2023").valueOf(),
            value: 17,
        },
        {
            date: new Date("3/11/2023").valueOf(),
            value: 15,
        }
    ]
}];


new Chart(document.getElementById("chart"), {
    data: {
        datasets: chartData
    },
    options: {
        responsive: true,
        parsing: {
            xAxisKey: "date",
            yAxisKey: "value",
        },
        interaction: {
            intersect: false,
            axis: 'x',
            //mode: 'nearest',
        },

        scales: {
            x: {
                type: "time",
                time: {
                    unit: 'day',
                    displayFormats: {
                        day: 'MM/dd/yyyy'
                    }
                }
            }
        }
    }
});
<div style="height:120vh">
<canvas id="chart" style="background-color: #000"></canvas>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/4.2.1/chart.umd.js" integrity="sha512-vCUbejtS+HcWYtDHRF2T5B0BKwVG/CLeuew5uT2AiX4SJ2Wff52+kfgONvtdATqkqQMC9Ye5K+Td0OTaz+P7cw==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-adapter-date-fns"></script>

Leave a comment