score:0

Accepted answer

you can omit labels in the chart configuration and instead generate data as individual points through objects containing x and y properties as shown here.

const labels = ["2020-05-13", "2020-05-11", "2020-05-12", "2020-05-14", "2020-05-09", "2020-05-10"];
const basedata = [20, 11, 9, 22, 11, 9];
const data = labels.map((l, i) => ({ x: l, y: basedata[i] }));

this produces the following data.

[
  { "x": "2020-05-13", "y": 20 },
  { "x": "2020-05-11", "y": 11 },
  { "x": "2020-05-12", "y": 9 },
  { "x": "2020-05-14", "y": 22 },
  { "x": "2020-05-09", "y": 11 },
  { "x": "2020-05-10", "y": 9 }
]

the xaxis would then have to be defined as follows:

xaxes: [{
  offset: true,
  type: 'time',
  time: {
    unit: 'day',   
    source: 'data',
    tooltipformat: 'mmm dd' 
  }
}],

please have a look at your amended code below. 

const labels = ["2020-05-13", "2020-05-11", "2020-05-12", "2020-05-14", "2020-05-09", "2020-05-10"];
const basedata = [20, 11, 9, 22, 11, 9];
const data = labels.map((l, i) => ({ x: l, y: basedata[i] }));

var chartdata = {
  datasets: [{
    label: "all detections",
    backgroundcolor: "#02a499",
    bordercolor: "#ffffff",
    borderwidth: 1,
    hoverbackgroundcolor: "#02a499",
    hoverbordercolor: "#02a499",
    data: data
  }]
};

new chart("chartbydate", {
  type: 'bar',
  data: chartdata,
  options: {
    scales: {
      xaxes: [{
        offset: true,
        type: 'time',
        time: {
          unit: 'day',   
          source: 'data',
          tooltipformat: 'mmm dd' 
        }
      }],
      yaxes: [{
        ticks: {
          beginatzero: true
        }
      }]
    }
  }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/chart.js/2.9.3/chart.bundle.min.js"></script>
<canvas id="chartbydate"></canvas>


Related Query

More Query from same tag