Issue while plotting bar chart with custom x-axis with month and year in chart.js

Question

We are trying to plot bar chart using chart.js and wanted to display month and year in x-axis but unable to do so.

We are want to plot bar as shown below:

https://drive.google.com/file/d/1ezvUdDyp3uNLP3pdumXKHcXGNeBVQw63/view

Code snippet:

var timeFormat = 'DD/MM/YYYY';
var data = [
  { date: "1/1/2020  11:35:44 PM", file: "file1", value: 0.0056 },
  { date: "1/1/2020 23:35", file: "file2", value: 0.00103 },
  { date: "1/1/2020 23:35", file: "file3", value: 0.00513 },
  { date: "1/1/2020 23:59", file: "file4", value: 0.00589 },
  { date: "3/2/2020 0:24", file: "file5", value: 0.03017 },
  { date: "3/2/2020 0:30", file: "file6", value: 0.00347 },
  { date: "3/2/2020 0:43", file: "file7", value: 0.00784 },
  { date: "5/2/2020 0:51", file: "file8", value: 0.02477 },
  { date: "5/2/2020 1:08", file: "file9", value: 0.00858 },
  { date: "8/2/2020 2:03", file: "file10", value: 0.00753 },
  { date: "8/2/2020 2:36", file: "file11", value: 0.0091 },
  { date: "1/2/2021 4:38", file: "file12", value: 0.01175 },
  { date: "2/4/2021 5:15", file: "file13", value: 0.01092 }
];

var ctx = document.getElementById("CanvasFileData").getContext('2d');
var myChart = new Chart(ctx, {
  type: 'bar',
  data: data,
  options: {
    responsive: true,
    title: {
      display: true,
      text: "File data"
    },
    scales: {
      xAxes: [{
        type: "time",
        time: {
          format: timeFormat,
          tooltipFormat: 'll'
        },
        scaleLabel: {
          display: true,
          labelString: 'Date'
        }
      }],
      yAxes: [{
        scaleLabel: {
          display: true,
          labelString: 'value'
        },
        ticks: {
          beginAtZero: true
        }
      }]
    },
    tooltips: {
      callbacks: {
        label: function(tooltipItem) {
          return "File: " + tooltipItem.file + ", Date:" + tooltipItem.date + ", Value:" + tooltipItem.value;
        }
      }
    }
  }
});

<canvas id="CanvasFileData" style="width: 100%"></canvas>

uminder · Accepted Answer · 2021-02-07T12:37:56.027

Your file bars shall be equally spread over the available space on the x-axis. Using a time axis in this context is not an option since it won't correctly match the positions of the bars.

It would take time to explain everything in detail to obtain what you're looking for. Therefore, you best study below runnable code and see how it can be done.

var data = [
  { date: "1/1/2020  11:35:44 PM", file: "file1", value: 0.0056 },
  { date: "1/1/2020 23:35", file: "file2", value: 0.00103 },
  { date: "1/1/2020 23:35", file: "file3", value: 0.00513 },
  { date: "1/1/2020 23:59", file: "file4", value: 0.00589 },
  { date: "3/2/2020 0:24", file: "file5", value: 0.03017 },
  { date: "3/2/2020 0:30", file: "file6", value: 0.00347 },
  { date: "3/2/2020 0:43", file: "file7", value: 0.00784 },
  { date: "5/2/2020 0:51", file: "file8", value: 0.02477 },
  { date: "5/2/2020 1:08", file: "file9", value: 0.00858 },
  { date: "8/2/2020 2:03", file: "file10", value: 0.00753 },
  { date: "8/2/2020 2:36", file: "file11", value: 0.0091 },
  { date: "1/2/2021 4:38", file: "file12", value: 0.01175 },
  { date: "2/4/2021 5:15", file: "file13", value: 0.01092 }
];
const moments = data.map(o => moment(o.date, 'M/D/YYYY'));
const months = moments.map(m => m.format('MMM'));
const monthLabels = months.map((m, i) => i == 0 || months[i - 1] != m ? m : '〃');
const years = moments.map(m => m.format('YYYY'));
const yearLabels = years.map((y, i) => i == 0 || years[i - 1] != y ? y : '');

new Chart('CanvasFileData', {
  type: 'bar',
  data: {
    labels: data.map(o => o.file),
    datasets: [{
      data: data.map(o => o.value),
      backgroundColor: 'rgb(68, 114, 196)',
      barPercentage: 0.5
    }]
  },
  options: {
    responsive: true,
    title: {
      display: true,
      text: "File data"
    },
    legend: {
      display: false
    },
    scales: {
      xAxes: [{
        ticks: {
          minRotation: 90,
          padding: -32
        },
        gridLines: {
          drawOnChartArea: false,
          tickMarkLength: 40
        }
      },
      {
        offset: true,
        labels: monthLabels,
        gridLines: {
          display: false
        },   
      },
      {
        offset: true,
        labels: yearLabels,
        gridLines: {
          display: false
        },
        scaleLabel: {
          display: true,
          labelString: 'Date'
        }        
      }],
      yAxes: [{
        scaleLabel: {
          display: true,
          labelString: 'value'
        },
        ticks: {
          beginAtZero: true
        }
      }]
    },
    tooltips: {
      callbacks: {
        label: tooltipItem => "File: " + tooltipItem.xLabel + ", Date:" + data[tooltipItem.index].date + ", Value:" + tooltipItem.value
      }
    }
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.1/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.min.js"></script>
<canvas id="CanvasFileData" height="150"></canvas>

Issue while plotting bar chart with custom x-axis with month and year in chart.js

1 Answers1