Date Chart

by bairog

HTML

<div id="chartDiv"><canvas id="chart"></canvas></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.5.1/chart.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-adapter-date-fns/dist/chartjs-adapter-date-fns.bundle.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/chartjs-plugin-zoom.min.js"></script>

JavaScript

var data = {
  datasets: [{
    label: "dataset1",
    lineTension: 0,  
    fill: false,  
    backgroundColor: '#43dea6',
    borderColor: '#43dea6',
    data: [{x:"2021-03-30T00:00:00",y:6},{x:"2021-04-01T00:00:00",y:3},{x:"2021-04-05T00:00:00",y:4},{x:"2021-04-12T00:00:00",y:7},{x:"2021-04-19T00:00:00",y:6},{x:"2021-04-26T00:00:00",y:8},{x:"2021-05-04T00:00:00",y:10},{x:"2021-05-11T00:00:00",y:10},{x:"2021-06-09T00:00:00",y:2},{x:"2021-06-16T00:00:00",y:3},{x:"2021-06-23T00:00:00",y:4}]
  },
  {
    label: "dataset2",
    lineTension: 0,  
    fill: false,  
    backgroundColor: '#e44269',
    borderColor: '#e44269',
    data: [{x:"2021-03-30T00:00:00",y:0},{x:"2021-04-01T00:00:00",y:3},{x:"2021-04-05T00:00:00",y:1},{x:"2021-04-12T00:00:00",y:1},{x:"2021-04-19T00:00:00",y:1},{x:"2021-04-26T00:00:00",y:0},{x:"2021-05-04T00:00:00",y:0},{x:"2021-05-11T00:00:00",y:0},{x:"2021-06-09T00:00:00",y:4},{x:"2021-06-16T00:00:00",y:3},{x:"2021-06-23T00:00:00",y:2}]
  }]
};

var options = {
    animation: false,    
    scales: {
        xAxis: {
            type: 'time',
            time: {
						    unit: 'day',
                tooltipFormat: 'dd.MM.yyyy',
                displayFormats: {
                    day: 'dd.MM.yy'
                }
            },
						ticks: {
						    autoSkipPadding: 20,
                min: new Date(2021, 2, 29, 0, 0, 0),
                max : new Date(2021, 05, 25, 0, 0, 0)                
            }
        },
        yAxis: {
            min: -1,
            max: 11
        }
    },
		plugins: {
      zoom: {
        pan: {
    			enabled: true,
    			mode: 'xy',
  			},
  			zoom: {
    			wheel: {
      			enabled: true,
    			}, 
					drag: {
      			enabled: true,
						modifierKey: 'ctrl'
    			}, 
    			mode: 'xy'
  			}
     }			
   }
};


var ctx = document.getElementById("chart");
var myChart = new Chart(ctx, {
  type: 'line',
  data: data,
  options: options
});