[Chartjs]-Displaying line chart for multiple months using chart.js

by

1👍

I can help for parsing and displaying the dates on the xAxis but unfortunately I don’t know Bootstrap.

Define your xAxis as follows:

xAxes: [{
  type: 'time',
  time: {
    parser: 'MMM-YY',
    unit: 'month',
    displayFormats: {
      month: 'MMM-YY'
    }
  }
}]

Chart.js internally uses Moment.js, hence you can use the following date/time formats for parsing and displaying the date. In your case, this is 'MMM-YYD'.

const plan_plan = [{label: "Feb-20", plan_hrs: "20"}, {label: "Oct-20", plan_hrs: "94"}]; 
const actual_plan = [{label: "Mar-20", actual_hrs: "1"}];

new Chart("scurve_chart", {
  type: 'line',
  data: {
    datasets: [{
        label: "Planned Hours",
        fill: false,
        borderColor: "rgba(255, 0, 0, 1)",
        data: plan_plan.map(o => ({ x: o.label, y: Number(o.plan_hrs)}))
      },
      {
        label: "Actual Hours",
        fill: false,
        borderColor: "rgba(0, 255, 0, 1)",
        data: actual_plan.map(o => ({x: o.label, y: Number(o.actual_hrs)}))
      }
    ]
  },
  options: {
    scales: {
      yAxes: [{
        ticks: {
          beginAtZero: true
        }
      }],
      xAxes: [{
        type: 'time',
        time: {
          parser: 'MMM-YY',
          unit: 'month',
          displayFormats: {
             month: 'MMM-YY'
          }
        }
      }]
    }
  }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.bundle.js"></script> 
<canvas id="scurve_chart" height="90"></canvas>

Leave a comment