score:1

remove this barthickness: 40, (40 in pixels). in your case "no space/room" for such width = overlaps & broken layout.

https://www.chartjs.org/docs/latest/charts/bar.html#barthickness

basic snippet (base on your code) (change barthickness barpercentage barpercentage): https://www.chartjs.org/docs/latest/charts/bar.html#barpercentage-vs-categorypercentage

var canvas = document.getelementbyid("mychart");
var ctx = canvas.getcontext("2d");

var _datesforlabel = ["2020-02-10",
                      "2020-02-13",
                      "2020-02-17",
                      "2020-02-18",
                      "2020-02-19",
                      "2020-02-20",
                      "2020-02-21",
                      "2020-02-22",
                      "2020-02-23",
                      "2020-02-24",
                      "2020-02-25",
                      "2020-02-26",
                      "2020-02-27",
                      "2020-02-28",
                      "2020-02-29",
                      "2020-03-01",
                      "2020-03-02",
                      "2020-03-03",
                      "2020-03-04",
                      "2020-03-05",
                      "2020-03-07",
                      "2020-03-08",
                      "2020-03-09",
                      "2020-03-10","2020-02-10",
                      "2020-02-13",
                      "2020-02-17",
                      "2020-02-18",
                      "2020-02-19",
                      "2020-02-20",
                      "2020-02-21",
                      "2020-02-22",
                      "2020-02-23",
                      "2020-02-24",
                      "2020-02-25",
                      "2020-02-26",
                      "2020-02-27",
                      "2020-02-28",
                      "2020-02-29",
                      "2020-03-01",
                      "2020-03-02",
                      "2020-03-03",
                      "2020-03-04",
                      "2020-03-05",
                      "2020-03-07",
                      "2020-03-08",
                      "2020-03-09",
                      "2020-03-10"]      

var _chartdatawithoptions =[];

_chartdatawithoptions.push({
  label:"dataseries1",
  data:[1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24],
  backgroundcolor:"blue"
})

_chartdatawithoptions.push({
  label:"dataseries2",
  data:[2,3,4,5,6,7,8,9,10,12,13,11,10,19,14,12,11,18,26,23,21,28,24,2,3,4,6,9,1,2,1,11,12,13,14,15,16,17,18,19,20,21,22,23,11,22,4,6,3,6],
  backgroundcolor:"red"
})

var config = {
  type: 'bar',
  data: {
    labels: _datesforlabel,
    datasets: _chartdatawithoptions,
    borderskipped: 'top'
  },
  options: {
    // responsive: true,
    tooltips: {
      // mode: ''
    },
    plugins: {
      colorschemes: {
        scheme: 'office.waveform6'
      }
    },
    scales: {
      yaxes: [{
        ticks: {
          min: 0,
        }
      }],
      xaxes: [{
        // barthickness: 40, // number (pixels) or 'flex'
        maxbarthickness: 40,
        barpercentage: 1,/* change this */
        categorypercentage: 0.5,/* change this */
        ticks: {
          min: 0,
        },
      }]
    }
  }
};

mybarchart = new chart(ctx, config);
<script src="https://cdnjs.cloudflare.com/ajax/libs/chart.js/2.9.3/chart.min.js" ></script>

<div style="height: 500px; width: 100%;">
<canvas id="mychart" ></canvas>
</div>

about "set labels without rotation" - again "no room" - by maxrotation: 0, - full answer + example her: chart js change label orientation on x-axis for line charts

"to much points/data" issue: for now "no way" to auto group data - one idea is to use stacked: true ("save room") - or manually filter your data (show fewer points - related stackoverflow q: chartjs 2 scaling lots of data points).


Related Query

More Query from same tag