Chartjs-Chartjs different length of labels and datasets

by

1👍

✅

Your approach is almost fine. The only thing that needs to be changed is removing data.labels and defining xAxis as follows:

xAxes: [{
  offset: true,
  type: 'time',
  time: {
    parser: 'MMM',
    unit: 'month',
    displayFormats: {
      month: 'MMM'
    }
  },

Please note that Chart.js uses Moment.js for the functionality of the
time axis. Therefore you should use the bundled version of Chart.js that includes Moment.js in a single file. 

var ctx = document.getElementById("myBarChart");
var myLineChart = new Chart(ctx, {
  type: 'bar',
  data: {
    datasets: [ 
     {
        label: "serj",
        backgroundColor: "#11564D",
        borderColor: "rgba(2,117,216,1)",
        data: [{x: "Mar", y: 128400}, {x: "Apr", y: 53500}]
      }, 
     {
        label: "aisha",
        backgroundColor: "#508D2F",
        borderColor: "rgba(2,117,216,1)",
        data: [{x: "Mar", y: 58500}, {x: "Apr", y: 12000}]
      }, 
     {
        label: "serikzhan",
        backgroundColor: "#3F22F5",
        borderColor: "rgba(2,117,216,1)",
        data: [{x: "Apr", y: 8000}]
      }
     ]
  },
  options: {
    scales: {
      xAxes: [{
        offset: true,
        type: 'time',
        time: {
          parser: 'MMM',
          unit: 'month',
          displayFormats: {
            month: 'MMM'
          }
        },
        gridLines: {
          display: false
        },
        ticks: {
          maxTicksLimit: 6
        }
      }],
      yAxes: [{
        ticks: {
          min: 0,
          max: 150000,
          maxTicksLimit: 5
        },
        gridLines: {
          display: true
        }
      }],
    },
    legend: {
      display: false
    }
  }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.bundle.min.js"></script>
<canvas id="myBarChart" height="90"></canvas>

Leave a comment