I need to group the x-axis labels. So that I can show the labels and sub label on x-axis.

[junaidtk]

Expected behavior

I have months in the x-axis labels and I have to groups the months into quarter/year. So how it is possible using the chart.js

Current behavior

Currently i have checked the link.
#2138

This is almost 6 year old answer, is there any easy way of implementation ? Here, it is adding the group by custom breaking of label string.

Reproducible sample

chart.min.js and Jquery

Optional extra steps/info to reproduce

No response

Possible solution

No response

Context

No response

chart.js version

v3.7.1

Browser name and version

No response

Link to your project

No response

[LeeLenaleee]

You can add a second x axis:

var options = {
  type: 'line',
  data: {
    labels: ["Jan", "Feb", "March", "Jan", "Feb", "March"],
    datasets: [{
        label: '# of Votes',
        data: [12, 19, 3, 5, 2, 3],
        borderColor: 'orange'
      },
      {
        label: '# of Points',
        data: [7, 11, 5, 8, 3, 7],
        borderColor: 'pink'
      }
    ]
  },
  options: {
    scales: {
      x: {},
      secondX: {
        position: 'bottom',
        labels: ['', 'year1', '', '', 'year2', ''],
        grid: {
          borderWidth: 0,
          tickLength: 0
        }
      }
    }
  }
}

var ctx = document.getElementById('chartJSContainer').getContext('2d');
new Chart(ctx, options);

https://jsfiddle.net/Leelenaleee/3b27jqah/6/

[junaidtk]

Thank you for your response. I think this work around will be great.

However, I was wondering, Is it possible to make the second x-axis labels exactly at the centre of the set of first axis labels plotted.

For Eg: if the entire labels for all x-axis is like a below data group :

labels: [ "January" => [1,12,13,24,30], "February" => [10,12,14,16,25], .... ]

So first I have to plot the first x-axis with numbers like 1, 12, 13, 24, 30, 10,12 etc....
And then we have to plot the January and February in the second x-axis. Also these second x-axis data must be exactly at the centre of the label added in the first x-axis.

In the above example we are manually adding the blank data at some points, If we are generating the entire data dynamically, then I think it is difficult to find the blank data for the second x-axis.

Any Workaround will be appreciated.
Thank you

[LeeLenaleee]

You would need to do some math, find the length of the arrays half it, add that amount of blanks, then value, then blanks again etc

[junaidtk]

Thank you for your reply. I think it is possible with some math computation.
Currently I am thinking to implement it by using the any default option available chart.js package.

Like by setting any fag, or passing any additional settings like that.

[Udemology]

@junaidtk having a second scale is probably easier as it is build in. But if a custom plugin is acceptable perhaps this might be an alternative. This is drawn within the canvas by creating a chart.js plugin.

See below this will create the text as well. All you need to do is calculate the coordinates, and add padding to the bottom. For deeper understanding watch this: https://youtu.be/oVwvwl5wogI

Perhaps this might be helpful.

`

const subLabels = {
  id: 'subLabels',
  afterDatasetsDraw(chart, args, pluginOptions) {
    console.log(chart)
    const { ctx, chartArea: {left, right, top, bottom, width, height} } = chart;

    ctx.save();

    subLabelText('WEEK 1', width / 4 * 1); // calculates the position Text 1
    subLabelText('WEEK 2', width / 4 * 3); // calculates the position Text 2

    function subLabelText(text, x){
      ctx.font = 'bolder 12px sans-serif';
      ctx.fillStyle = 'rgba(102, 102, 102, 1)';
      ctx.textAlign = 'center';
      ctx.fillText(text, x + left, bottom + 40);
    }
  }
}

`