Chart.js - Prevent two bars merging as one bar when dates are the same and y values are different

Viewed 372

Chart.js v3.2.1

Background: 2 datasets that form a stacked bar chart, x axis is timeseries and y axis is linear.

I have an issue where two bars merge as one bar when the dates are the same. I don't mind the x tick label merging as one date, but the actual bars I would like to keep separate.

My chart configuration:

  var myChart = new Chart(ctx, {
    type: 'bar',
    data: {
      datasets: chartDatasets
    },
    options: {
      responsive: true,
      maintainAspectRatio: false,
      scales: {
        x: {
          stacked: true,
          offset: true,
          type: 'timeseries',
          time: {
            parser: 'YYYY-MM-DD',
            tooltipFormat: 'll',
            unit: 'day',
            displayFormats: {
              day: 'MMM D'
            },
          },
          ticks: {
            source: 'data',
            align: 'center',
          },
          grid: {
            drawOnChartArea: false
          },
        },
        y: {
          stacked: true,
          type: 'linear',
          ticks: {
            beginAtZero: true
          },
          title: {
            display: true,
            text: 'kg Dry Matter / ha',
            font: {
              weight: "bold"
            }
          }
        }
      }
    }
  });

I have created a JSFiddle to duplicate the problem.

https://jsfiddle.net/kharrisson/pc359Lg4/10/

In the first dataset provided to the chart, there are 2 "May 18" records with different y values. Why have they merged into one bar? I am unsure if this is a bug, or if there is a config setting I need to set.

0 Answers
Related