Chartjs-How to adjust spaces between points in chart js?

by

0👍

Can you use time on the x axis?

Below is an example

// "+" before (new Date(2021,11,29)) return miliseconds from 1970 year
const dataA = [ 
    {x:+new Date(2021,11,29), y:1},         // { x: 1640732400000, y: 1}, 
    {x:+new Date(2022,0,10), y:1},          // { x: 1641769200000, y: 1}, 
    {x:+new Date(2022,1,21), y:9},          // { x: 1645398000000, y: 9}, 
    {x:+new Date(2022,1,25), y:9.3},        // { x: 1645743600000, y: 9.3}
]; 

const cfgChart = {
    type: 'line',
    data: {
        datasets: [
            {
                backgroundColor: '#74adf7',
                borderColor: '#74adf7',
                data: dataA,
                label: 'A',
                lineTension: 0.4,
            },
        ],
    },
    options: {
        animation: false,
        parsing: false,
        interaction: {
            mode: 'index',
            axis: 'x',
            intersect: false,
        },
        scales: {
            x: {
                type: 'time',
            },
        },
    },
};

const chart = new Chart(document.querySelector('#chart').getContext('2d'), cfgChart);
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.7.1/chart.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/luxon/2.3.1/luxon.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/chartjs-adapter-luxon/1.1.0/chartjs-adapter-luxon.min.js"></script>

<div>
  <canvas id="chart"></canvas>
</div>

Leave a comment