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

by

2👍

✅

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>

Leave a comment