Даты не отображаются на оси X с использованием Chart.Js на MVC 5

Question

Моя линейная диаграмма, использующая Chart.js, не отображает даты на оси X. даты можно увидеть в режиме отладки (из Json Controller). Ось Y в порядке. см. мой график: https://gyazo.com/96c992818ce575ac30c59622ed542acf.

в нем должны отображаться случаи вроде:

1) branch2 Count = 1, startDate = '2019-10-02'

2) branch2 Count = 1, startDate = '2019-09-30'

Я безуспешно пробовал примеры, предоставленные stackoverflow.

var dataChart = {
           label: [],
           datasets: [
               {
                   label: "Branch1",
                   backgroundColor: "rgba(0, 0, 255, 0.31)",
                   borderColor: "rgba(0, 0, 255, 0.66)",
                   pointBorderColor: "rgba(0, 0, 255,0.70)",
                   pointBackgroundColor: "rgba(0, 0, 255,0.70)",
                   pointHoverBackgroundColor: "#fff",
                   pointHoverBorderColor: "rgba(0, 0, 255, 1)",
                   pointBorderWidth: "1",
                   data: []
               },
               {
                   label: "Branch2",
                   backgroundColor: "rgba(255, 128, 128, 0.31)",
                   borderColor: "rgba(255, 128, 128, 0.66)",
                   pointBorderColor: "rgba(255, 128, 128,0.70)",
                   pointBackgroundColor: "rgba(255, 128, 128,0.70)",
                   pointHoverBackgroundColor: "#fff",
                   pointHoverBorderColor: "rgba(255, 128, 128, 1)",
                   pointBorderWidth: "1",
                   data: []
               },
               {
                   label: "Branch3",
                   backgroundColor: "rgba(0, 204, 153, 0.31)",
                   borderColor: "rgba(0, 204, 153, 0.66)",
                   pointBorderColor: "rgba(0, 204, 153,0.70)",
                   pointBackgroundColor: "rgba(0, 204, 153,0.70)",
                   pointHoverBackgroundColor: "#fff",
                   pointHoverBorderColor: "rgba(0, 204, 153, 1)",
                   pointBorderWidth: "1",
                   data: []
               }
           ]
       };

       $.getJSON("TreasuryChart/",
           function(branchData) {
               for (var i = 0; i < branchData.length; i++) {
                   var d = moment(branchData[i].startDate);
                   dataChart.label.push(d);
                   dataChart.datasets[0].data.push(branchData[i].branch1);
                   dataChart.datasets[1].data.push(branchData[i].branch2);
                   dataChart.datasets[2].data.push(branchData[i].branch3);
               }
               var ctx = document.getElementById("TreasuryChart").getContext("2d");
               var myLineChart = new Chart(ctx,
                   {
                       type: "line",
                       data: dataChart,
                       options: {
                           responsive: true,
                           maintainAspectRatio: false,
                           scales: {
                               xAxis: [
                                   {
                                       //display: true,
                                       type: 'time',
                                       time: {
                                           parser: 'MMM D',
                                           unit: 'day',
                                           displayFormats: {
                                               day: 'MMM D'
                                           }
                                       },
                                       ticks: {
                                         source: 'dataChart'
                                       }
                                   }
                               ],
                               yAxes: [
                                   {
                                       ticks: {
                                           beginAtZero: true
                                       }
                                   }
                               ]
                           }
                       }
                   });
           });

Я ожидаю отобразить диаграммус датами на оси X в формате День Месяц.

Благодарим за помощь.

Answer 1

Простая орфографическая ошибка. Это xAxes не xAxis. (И я установил scaleLabel на display: true, потому что я не знаю, какую версию Chart.js вы используете)

scales: {
   xAxes: [
       {
           //display: true,
           type: 'time',
           time: {
               parser: 'MMM D',
               unit: 'day',
               displayFormats: {
                   day: 'MMM D'
               }
           },
           ticks: {
             source: 'dataChart'
           },
           scaleLabel: {
              display: true
           }
       }
   ],
   yAxes: [
       {
           ticks: {
               beginAtZero: true
           },
           scaleLabel: {
             display: true
           }
       }
   ]

}