[Chartjs]-Show more dataset than labels in chart.js

by

2👍

ChartJS does not need labels to map the values. The good way to do what you are doing is to implement a time axis. This would allow you to add any range of time without adding to the list of labels. You also need a time parser. here is a list.

config:

const config = {
  type: 'line',
  data: data,
  options: { 
      scales: {
          xAxis: {
                type: 'time',
                
                ticks: {
                    source: 'labels', // get ticks from given labels
                },

                time: {
                    minUnit: 'minute', // smallest time format

                    displayFormats: {
                        minute: "HH:mm",
                        hour: "dd/MM HH:mm",
                        day: "dd/MM",
                        week: "dd/MM",
                        month: "MMMM yyyy",
                        quarter: 'MMMM yyyy',
                        year: "yyyy",
                    }
                }
            },
        },
    }
};

data:

var data = {
  labels: labels,
  datasets: [{
    label: 'My First Dataset',
    data: generateTestSeries(),
    fill: false,
    borderColor: 'rgb(75, 192, 192)',
    tension: 0.1
  }]
};

labels:

var labels = [
  new Date(2021, 10, 15, 15, 0),
  new Date(2021, 10, 15, 15, 5),
  new Date(2021, 10, 15, 15, 10),
  new Date(2021, 10, 15, 15, 15),
  new Date(2021, 10, 15, 15, 20),
  new Date(2021, 10, 15, 15, 25),
  new Date(2021, 10, 15, 15, 30),
  new Date(2021, 10, 15, 15, 35),
  new Date(2021, 10, 15, 15, 40),
  new Date(2021, 10, 15, 15, 45),
  new Date(2021, 10, 15, 15, 50),
  new Date(2021, 10, 15, 15, 55),
  new Date(2021, 10, 15, 16, 0),
];

test data:

function generateTestSeries () { // create test data
    let series = [];
    var val = 0;

    let start = new Date(2021, 10, 15, 15);
    let end = new Date(2021, 10, 15, 16);

    while (start < end) {
        val += Math.floor(Math.random() * 11) - 5;

        series.push({
            "x": start, 
            "y": val, 
        });

        start = new Date(start.getTime() + 60000);
    }
    
    return series;
}

this will look like:
enter image description here

as for my previous point about the labels, you can drop them and it will generate some based on your data. it will look like this:
enter image description here

if that’s okay you can do it by removing labels: labels,

and changing source: 'labels', to source: 'auto',

for more on time axes: Time Cartesian Axis

1👍

Chart.js needs labels to map the values to so you will need to provide labels, although you can use the tick callback to hide some of the labels like so:

var options = {
  type: 'line',
  data: {
    labels: ["0", "5", "10", "15", "20", "25"],
    datasets: [{
      label: '# of Votes',
      data: [12, 19, 3, 5, 2, 3],
      borderWidth: 1
    }]
  },
  options: {
    scales: {
      xAxes: [{
        ticks: {
          callback: (tick) => (Number(tick) % 10 === 0 ? tick : null) // Replace null with "" to show gridline
        }
      }]
    }
  }
}

var ctx = document.getElementById('chartJSContainer').getContext('2d');
new Chart(ctx, options);
<body>
  <canvas id="chartJSContainer" width="600" height="400"></canvas>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.js"></script>
</body>

Leave a comment