javascriptchart.jslinechartreact-chartjsreact-chartjs-2

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

The data and dates for the white line in the chart you see below are as follows. As you can see here, for example, there is no data for March 9 - March 10 - March 11 and March 12. But since the white line comes to the left, when I hover the chart, it seems like there is data for March 10 as an example. How can I match data and date?

Date: [ "Apr 02 2023, 12:04", "Apr 01 2023, 12:04", "Mar 31 2023, 12:03", "Mar 30 2023, 12:03", "Mar 29 2023, 12:03", "Mar 27 2023, 12:03", "Mar 26 2023, 12:03", "Mar 24 2023, 12:03", "Mar 13 2023, 12:03", "Mar 08 2023, 12:03", "Mar 06 2023, 12:03", "Mar 05 2023, 12:03" ]

Value: [ "0.0177", "0.41", "0.301", "0.1", "0.016", "0.0171", "0.0176", "0.0175", "0.0169", "0.0101", "0.0179", "0.09" ]

enter image description here

I searched for fix this problem ut i can't find any solutions

Solution

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

    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>