CODEWITHSUNDEEP
javascripthtmlcharts
ritzrori
ritzrori

Reputation: 91

Adjusting X-Axis Labels for Dates ChartJS

I have the following piece of js:

var canvas_link = document.getElementById("chart1").getContext("2d");

  var myChart = new Chart(canvas_link, {
    
    type: 'bar',
    data: {
      
      labels: xvalues,

      datasets: [{
        label: area_option,
        data: data,
        backgroundColor: 'rgba(255, 99, 132, 1)',
      }]
    },
   

  
  })

This piece of code outputs the following graph:[![enter image description here][1]][1]

The labels underneath are really crowded and I wanted to just have a quarterly range on the x axis. The labels are currently in string format. Any advice will be very much appreciated since im having a hard time to understand the documentation. I tried to remove some of the values in the array for labels but that just results in unordered blanks. Thank you!

Upvotes: 0

Views: 2786

Answers (1)

Vitalii
Vitalii

Reputation: 2131

There is a special type of axis - time and it can be used to automatically scale the X axis labels.

The time scale is used to display times and dates.

When building its ticks, it will automatically calculate the most comfortable unit based on the size of the scale.

labels option is not needed and data should be reshaped into array of { x: new Date('2020-12-01'), y: 123 }.

const data = [
        { x: new Date('2020-12-01'), y: 123 },
        { x: new Date('2020-12-02'), y: 134 },
        { x: new Date('2020-12-03'), y: 154 },
        // etc.
],

X axis also needs to be configured to use time type (it does not seem to detect it automatically)

var myChart = new Chart(canvas_link, {
    
    type: 'bar',
    data: {
      
      // labels: xvalues, (not needed)

      datasets: [{
        label: area_option,
        data: data, // note: should be new data not the old one
        backgroundColor: 'rgba(255, 99, 132, 1)',
      }]
    },
   
    options: {
        scales: {
            xAxes: [{
                type: 'time',
                display: true,
                scaleLabel: {
                    display: true,
                    labelString: 'Date'
                },
                ticks: {
                    major: {
                        fontStyle: 'bold',
                        fontColor: '#FF0000'
                    }
                }
            }],
        }
    }
  
  })

You can find my code here.

UPDATED: X axis shows only quarters/months.

Adding unit: 'quarter' or unit: 'month' can group X axis labels by quarter or month.

Other supported units can be found in docs.

Updated version can be found here

var myChart = new Chart(canvas_link, {

    type: 'bar',
    data: {
        datasets: [{
            data: data,
            label: 'Data',
            backgroundColor: 'rgba(255, 99, 132, 1)',
        }]
    },

    options: {
        scales: {
            xAxes: [{
                type: 'time',
                display: true,
                scaleLabel: {
                    display: true,
                    labelString: 'Date'
                },
                time: {
                    unit: 'quarter',
                },
                ticks: {
                    major: {
                        fontStyle: 'bold',
                        fontColor: '#FF0000'
                    }
                }
            }],
        }
    }
})

Upvotes: 1

Related Questions