[Solved]-Chartjs - data format for bar chart with multi-level x-axes-Chart.js

without being confident that this is the simplest solution, i provide some example where i use a second axis, containing labels for the groups, but in a scaled-up array, for correct alignment.

the only problem is that if you enable rotation for the group maxrotation>0, the text will always be rotated, since (due to scaling) it is bound to a very small area.

https://jsfiddle.net/h6z4apvo/

var mydata = [
  ["abc212","toyota corolla","toyota",1.95],
  ["abc212","toyota yaris","toyota",1.94],
  ["abc212","totyota etios","toyota",1.93],
  ["abc212","honda city","honda",1.93],
  ["abc212a","honda brio","honda",1.91],
  ["def311","toyota camry","toyota",1.90],
  ["def310","toyota prius","toyota",1.82],
  ["def310","ford explorer","ford",1.85],
  ["def310","ford endeavour","ford",1.83],
  ["def305","ford fugo","ford",1.79]
];

/*calculates group labels to a scaled array so that they can align better*/
function calculategrouplabels(data){
  const scalefactor=100;
  var labels = _(data)
  .groupby((elem)=>elem[0])
  .map((entriesonsamegroup, key)=>{
      var newsize = entriesonsamegroup.length*scalefactor;
      var newarray = new array(newsize);
      newarray[0]="";
      newarray[newarray.length-1]="";
      newarray[parseint((newarray.length-1)/2)]=key;
      return newarray;
  }).flatten().value()

  return labels;
}


var labels = calculategrouplabels(mydata);

var ctx = $("#c");
var mychart = new chart(ctx, {
  type: 'bar',
  data: {
    datasets: [{
      label: '# of votes',
      xaxisid:'modelaxis',
      data: mydata.map((entry)=>entry[3])
    }]
  },
  options:{
    scales:{
      xaxes:[
        {
          id:'modelaxis',
          type:"category",
          ticks:{
            //maxrotation:0,
            autoskip: false,
            callback:function(label, x2, x3, x4){
              console.log("modelaxis", label, x2, x3, x4)
              return label;
            }
                   },
         labels:mydata.map((entry=>entry[1]))
        },
        {
          id:'groupaxis',
          type:"category",
          gridlines: {
            drawonchartarea: false,
          },
          ticks:{
            padding:0,
            maxrotation:0,
            autoskip: false,
            callback:function(label){
                return label;
            }
          },
          labels:labels

        }],
      yaxes:[{
        ticks:{
          beginatzero:true
        }
      }]
    }
  }
});

i have made such graph in my poc , where i used :

data: {
      labels: ["abc212", "abc212a",...],
      datasets: [
        {
          label: "abc212",
          data: [val1, val2,....]
        }, {
          label: "abc212a",
          data: [val3, val4,...]
        }
      ]
    }