JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.22.2/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.min.js"></script>
<body>
    <canvas id="chart" width="600" height="400"></canvas>
    <canvas id="chart2" width="600" height="400"></canvas>
</body>

JavaScript

function newDate(days) {
	return moment().add(days, 'd').toDate();
}

const lineData = {
  labels: null,
  datasets: 
  [
    {
      label: 'A',
      fill: false,
      backgroundColor: "hsl(50, 50%, 80%)",
      data: 
      [
        {
          x: newDate(1),
          y: 12
        },
        {
          x: newDate(2),
          y: 15
        }, 
      ],
    },
    {
      label: 'B',
      fill: false,
      backgroundColor: "hsl(250, 50%, 80%)",
      data: 
      [
        {
          x: newDate(0),
          y: 23
        },
        {
          x: newDate(2),
          y: 34
        },
        {
          x: newDate(3),
          y: 45
        },
      ]
    }
  ],
}

const lineOptions = {
type: 'bar',
	data: lineData,
	options: 
	{
		title: 
		{
	display: true,
  text: 'STACKED TRUE'
},
	legend: 
	{
	    display: true,
	},
	hover: 
	{
		mode: 'nearest'
	},
	fill: false,
	responsive: true,
	scales: 
	{
	xAxes: 
	[
			{
				stacked: true,
				display: true,
				ticks: 
				{							
					beginAtZero: false,
				},
				scaleLabel: 
				{
					display: true,
					labelString: "Day",
				},
				barThickness: 15,
				type: 'time',
				distribution: 'linear',
				bounds: 'ticks',
				time: 
				{
					unit: 'day',
					unitStepSize: 1,
					displayFormats: 
					{
						'day': 'DD/MM',
					},
					tooltipFormat: 'DD/MM',
				}
			}
		],
		yAxes: 
		[
			{
				ticks: 
				{
					beginAtZero: true,
				},
				display: true,
				stacked: true,
				scaleLabel: 
				{
					display: true,
					labelString: "Items",
				}
			}
		]
	},
	tooltips: 
	{
		mode: 'x',
	},
}
}
const chart = new Chart(document.getElementById("chart").getContext("2d"), lineOptions);


const lineOptions2 = {
	type: 'bar',
	data: lineData,
	options: 
	{
		title: 
		{
	  display: true,
    text: 'STACKED FALSE'
  },
	legend: 
	{
		display: true
	},
	hover: 
	{
		mode: 'nearest'
	},
	fill: false,
	responsive: true,
	scales: 
	{
		xAxes: 
		[
			{
				//stacked: true,
				display:...