Chartjs-Handle Date Gaps in Chart JS

by

0👍

✅

How library you are using time and chart? I use chart(v3.8) and luxon(time) seems to work

const exampleData = [{
    "x": +new Date('1909'),
    "y": 48900202
  },
  {
    "x": +new Date('1960'),
    "y": 889030
  },
  {
    "x": +new Date('1961'),
    "y": 890203
  },
    {
    "x": +new Date('1983'),
    "y": 8904
  },
]

const chartCfg = {
  type: 'line',
  data: {
    datasets: [{
      borderColor: 'green',
      backgroundColor: 'green',
      borderWidth: 1,
      pointStyle: 'cross',
      data: exampleData,
      label: 'example',
    }, ],
  },
  options: {
    maintainAspectRatio: false,
    animation: false,
    parsing: false,
    interaction: {
      mode: 'index',
    },
    scales: {
      x: {
        type: 'time',
        time: {
          displayFormats: {
                        year: 'yyyy',
          },
        },
      },
    },
  },
};
const chartCtx = document.getElementById('chart').getContext('2d');

const chart = new Chart(chartCtx, chartCfg);
chart.canvas.parentNode.style.height = '300px';
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.8.0/chart.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/luxon/2.4.0/luxon.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/chartjs-adapter-luxon/1.1.0/chartjs-adapter-luxon.min.js"></script>

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

Leave a comment