Date label in JavaScript chart doesn't display properly

I’m doing a Django project. In my chart.html file, I created a javascript bar chart. The data and the label of the chart have been defined in my views.py file.

This is my JavaScript bar chart: (I’m drawing this chart to display the order numbers in the most recent 7 days)

var ctx = document.getElementById("BarChart7d");
var BarChart7d = new Chart(ctx, {
  type: 'bar',
  data: {
    labels: [{{date7}}, {{date6}}, {{date5}}, {{date4}}, {{date3}}, {{date2}}, {{date1}}],
    datasets: [{
      label: "orders: ",
      backgroundColor: ['#4e73df', '#1cc88a', '#36b9cc', "#e74a3b", "#f6c23e", "#9B59B6", "#D68910"],
      hoverBackgroundColor: ['#353F8C ', '#17a673', '#2c9faf', "#9C4545", "#9C8545", "#4A235A", "#784212"],
      borderColor: "#4e73df",
      data: {{value7day}},
    }],
  },
  options: {
    maintainAspectRatio: false,
    layout: {
      padding: {
        left: 10,
        right: 25,
        top: 25,
        bottom: 0
      }
    },
    scales: {
      
      xAxes: [{
        
        gridLines: {
          display: false,
          drawBorder: false
        },
        ticks: {
          maxTicksLimit: 6
        },
        maxBarThickness: 80,
      }],
      yAxes: [{
        ticks: {

          callback: function(value, index, values) {
            return  number_format(value);
          }
        },
        gridLines: {
          color: "rgb(234, 236, 244)",
          zeroLineColor: "rgb(234, 236, 244)",
          drawBorder: false,
          borderDash: [2],
          zeroLineBorderDash: [2]
        }
      }],
    },
    legend: {
      display: false
    },
    tooltips: {
      titleMarginBottom: 10,
      titleFontColor: '#6e707e',
      titleFontSize: 14,
      backgroundColor: "rgb(255,255,255)",
      bodyFontColor: "#858796",
      borderColor: '#dddfeb',
      borderWidth: 1,
      xPadding: 15,
      yPadding: 15,
      displayColors: false,
      caretPadding: 10,
      callbacks: {
        label: function(tooltipItem, chart) {
          var datasetLabel = chart.datasets[tooltipItem.datasetIndex].label || '';
          return datasetLabel + number_format(tooltipItem.yLabel);
        }
      }
    },
  }
});

The {{value7day}} and the labels {{date7}} to {{date1}} have been defined in views.py:

rnow =  {'date': '2022-01-15', 'value': 34},
  ...
 {'date': '2022-03-16', 'value': 26},
 {'date': '2022-03-17', 'value': 15},
 {'date': '2022-03-18', 'value': 13},
 {'date': '2022-03-21', 'value': 29},
 {'date': '2022-03-22', 'value': 22},
 {'date': '2022-03-23', 'value': 22},
 {'date': '2022-03-24', 'value': 25},
 {'date': '2022-03-25', 'value': 15}]

day1 = list(rnow)[-1]
day2 = list(rnow)[-2]
day3 = list(rnow)[-3]
day4 = list(rnow)[-4]
day5 = list(rnow)[-5]
day6 = list(rnow)[-6]
day7 = list(rnow)[-7]     
value7day = [ day7['value'], day6['value'], day5['value'] , day4['value'], day3['value'], day2['value'], day1['value']]  
 
date7 = day7['date']
date6 = day6['date']
date5 = day5['date']
date4 = day4['date']
date3 = day3['date']
date2 = day2['date']
date1 = day1['date']

The date data is already string type. However, the labels are not shown properly. Instead of being displayed as 2022-03-17, 2022-03-18, 2022-03-21 they are displayed as 2002, 2001, 1998 ?? I think I should change the format of the label to date. How should I do that?

>Solution :

I imagine your javascript ends up looking like

data: {
  labels: [2022-03-16, 2022-03-17, ...]

The labels are treated as numbers, and some subtraction is done, so you end up with values like 1998, etc.

Those values should be strings:

labels: ["2022-03-16", "2022-03-17", ...]

in other words

labels: ["{{date7}}", "{{date6}}", ...]