Chartjs-Chart.js line chart does not render data lines on iOS

by

1👍

I figured it out, thanks to a warning SO showed in the code examaple.

The problem is that the dates I was passing in were not in ISO standard format, and therefore moments() was defaulting to the standard date() which does not work on all browsers.

I changed around the format and it now works fine.

/* Build the chart arrays */
var lineDataPaid = [10, 10, 10, 10, 10, 10, 10, 10, 10, 10];
var lineDataSEO = [0, 2, 5, 8, 12, 19, 31, 47, 67, 100];

/* Build the chart */
var ctx = document.getElementById("ROIchart").getContext("2d");
var monthLabels = [];
var dateObj = new Date();
dateObj.setDate(1);
var dateYear = dateObj.getFullYear();
var monthYearArray = [];
monthYearArray[0] = "01";
monthYearArray[1] = "02";
monthYearArray[2] = "03";
monthYearArray[3] = "04";
monthYearArray[4] = "05";
monthYearArray[5] = "06";
monthYearArray[6] = "07";
monthYearArray[7] = "08";
monthYearArray[8] = "09";
monthYearArray[9] = "10";
monthYearArray[10] = "11";
monthYearArray[11] = "12";
var dateYearLoop = dateYear;
for (i = 0; i < lineDataSEO.length; i++) {
  if (dateObj.getMonth() == 11) {
    monthLabels[i] = dateYearLoop + "-" + monthYearArray[dateObj.getMonth()];
    dateYearLoop = dateYearLoop + 1;
		dateObj.setMonth(dateObj.getMonth() + 1);
  } else {
    monthLabels[i] = dateYearLoop + "-" + monthYearArray[dateObj.getMonth()];
    dateObj.setMonth(dateObj.getMonth() + 1);
  }
}

var chart = new Chart(ctx, {
	// The type of chart we want to create
	type: "line",
	// The data for our dataset
	data: {
		labels: monthLabels,
		datasets: [{
			label: "Paid Leads / Traffic",
			backgroundColor: "rgba(255, 98, 132, 0.5)",
			borderColor: "rgb(255, 98, 132)",
			data: lineDataPaid,
			fill: false,
		}, {
			label: "SEO and Content",
			backgroundColor: "rgba(46, 57, 191, 0.5)",
			borderColor: "rgb(46, 57, 191)",
			data: lineDataSEO,
			fill: true,
		}]
	},
	// Configuration options go here
	options: {
    tooltips: {
        enabled: true,
        mode: 'single',
        callbacks: {
            label: function(tooltipItems, data) {
              	var text = tooltipItems.datasetIndex === 0 ? ' paid leads for $500' : ' SEO leads for $500';
                return tooltipItems.yLabel + text;
            }
        }
    },
		legend: {
			labels: {
				fontSize: 14
			}
		},
		responsive: true,
    aspectRatio: 1,
    //maintainAspectRatio: false,
		scales: {
			xAxes: [{
				display: true,
				scaleLabel: {
					display: true,
					labelString: 'Time',
					fontFamily: 'Open Sans',
					fontColor: 'rgb(29, 29, 31)',
					fontSize: '14'
				},
				ticks: {
					fontFamily: 'Open Sans',
					fontColor: 'rgb(29, 29, 31)',
					fontSize: '14'
				},
				type: "time",
				time: {
					unit: "month",
					displayFormats: {
						month: 'MMM YYYY'
					}
				}
			}],
			yAxes: [{
				display: true,
				scaleLabel: {
					display: true,
					labelString: 'Leads',
					fontFamily: 'Open Sans',
					fontColor: 'rgb(29, 29, 31)',
					fontSize: '14'
				},
				ticks: {
					beginAtZero: true,
					max: 100,
					fontFamily: 'Open Sans',
					fontColor: 'rgb(29, 29, 31)',
					fontSize: '14'
				}
			}]
		}
	}
});
.chart-container {
  position: relative;
  width: 100%;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.bundle.min.js"></script>

<div class="chart-container">
    <canvas id="ROIchart"></canvas>
</div>

Leave a comment