Why chart.js charts are not plotting data in Safari (works in Chrome)

Question

I have several charts that I have created in chart.js and they work fine in chrome but when I view them in Safari two of the charts have no data plotted just the shell of the chart shows up.

The code for these is exactly the same. I am pulling in csv file. The only difference that I can see is that the CSVs that don't work contain the month as well as the year in the data. How can I fix the code so that it will show up in Safari as well as Chrome? Is it my date settings. I am also getting this weird message in Chrome (see below, also looks related to date issues).

This type of data works ok:

"1980","2.4"

"1981","2.6"

"1982","2.7"

This data does not:

"May 2016","6.9"

"June 2016","6.8"

"July 2016","7.0"

Here is my code:

window.addEventListener('load', setup);

      async function setup() {
        var ctx = document.getElementById('myChart').getContext('2d');
        var dollar = await getData();
        var myChart = new Chart(ctx, {
          type: 'line',
          data: {
            labels: dollar.years,
            datasets: [
              {label: 'Unemployment rate',
                data: dollar.vals,
                borderColor: 'rgb(153,222,101)',
                backgroundColor: 'rgb(153,222,101, 0.2)',
                pointRadius: 0,
                borderWidth: 6,
                pointHitRadius: 10,
                }]
              },

options: {
layout: {
padding: {
  left: 0,
  right: 15,
  top: 0,
  bottom: 0}
  },
responsive: true,
title: {
display: false
},

legend: {
display: false
},

scales: {
yAxes: [{
ticks: {
min: 3,
max: 8,
stepSize: 1
}
}],

xAxes: [{
type: "time",
time: {
unit: "year",
tooltipFormat: "YYYY"
},

gridLines: {
display: true,
drawOnChartArea: false,
},

ticks: {
display: true,
maxTicksLimit: 5,
maxRotation: 0,
minRotation: 0,
padding: 1
},
}],
}
}
        });
        }

This is the error I have been getting in Chrome.

Deprecation warning: value provided is not in a recognized RFC2822 or ISO format. moment construction falls back to js Date(), which is not reliable across all browsers and versions. Non RFC2822/ISO date formats are discouraged and will be removed in an upcoming major release. Please refer to http://momentjs.com/guides/#/warnings/js-date/ for more info.

Answer 1

The problem is with parsing the date string. Chart js uses moment adapter for date strings and this type ("May 2016") of format might not be easily parsed in some browsers, to see what kind of formats you can use check https://momentjs.com/docs/#/parsing/string-formats/

The code below should work for the second set of data

window.addEventListener('load', setup);
var formatDate = (dateString) => {
  return moment(dateString, "MMM YYYY").toDate()
}

async function setup() {
  var ctx = document.getElementById('myChart').getContext('2d');
  var dollar = await getData();
  var myChart = new Chart(ctx, {
    type: 'line',
    data: {
      labels: dollar.years.map(year => formatDate(year)),
      datasets: [{
        label: 'Unemployment rate',
        data: dollar.vals,
        borderColor: 'rgb(153,222,101)',
        backgroundColor: 'rgb(153,222,101, 0.2)',
        pointRadius: 0,
        borderWidth: 6,
        pointHitRadius: 10,
      }]
    },

    options: {
      layout: {
        padding: {
          left: 0,
          right: 15,
          top: 0,
          bottom: 0
        }
      },
      responsive: true,
      title: {
        display: false
      },

      legend: {
        display: false
      },

      scales: {
        yAxes: [{
          ticks: {
            min: 3,
            max: 8,
            stepSize: 1
          }
        }],

        xAxes: [{
          type: "time",
          time: {
            unit: "year",
            tooltipFormat: "YYYY"
          },

          gridLines: {
            display: true,
            drawOnChartArea: false,
          },

          ticks: {
            display: true,
            maxTicksLimit: 5,
            maxRotation: 0,
            minRotation: 0,
            padding: 1
          },
        }],
      }
    }
  });
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.24.0/moment.min.js"></script>