chart-js X-label issue

by k_sav

HTML

<!DOCTYPE html>
<html>
	<head>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.min.js"></script>

 </head>
 
 <body>
	<div class="container">
		<div class="row">
				<div class="col" id="graph1">
					<canvas width="100" height="100" id="chart1"></canvas>
				</div>
		</div>
	</div>
 </body>

</html>

JavaScript

var x_vals = [];
var y_vals = [];
for (var i=1;i<361;i++) {
	x_vals.push(i);
  y_vals.push(1000-i);
}

var obj = { "chart_type":"line",
					"x_values": x_vals,
		  "series_name":"whatever",
		  "y_values": y_vals,
		  "chart_title":"Something",
      "maxTicksLimit": 5 
		  };
  createSingleChartFromObj("chart1",obj);

// for a single-y-axis
function createSingleChartFromObj(canvasID, obj){
	let myChart = document.getElementById(canvasID).getContext('2d'); //getContext is for canvas
	

	var massPopChart = new Chart(myChart, {
		type: obj['chart_type'], // bar, horizontalBar, pie, line, doughnut, radar, polarArea
		data: {
			labels: obj['x_values'], //['Boston','Worcester','Springfield','Lowell','Cambridge','New Bedford'],
			datasets:[{
				label: obj['series_name'],
				data: obj['y_values']
			}] 
		},
		options:{
			title:{
				display:true,
				text: obj['chart_title'],
			},
			scales: {
				yAxes: [{
					scaleLabel: {
						display: true,
						labelString: obj['series_name']
					},
					ticks: {
						userCallback: function(value,index,values) {
							if (parseInt(value)<1000) {
								return value.toFixed(2).replace(/\d(?=(\d{3})+\.)/g, '$&,');
							}
							else {
								// https://stackoverflow.com/questions/38800226/chart-js-add-commas-to-tooltip-and-y-axis
								return value.toString().replace(/\B(?=(\d{3})+(?!\d))/g,",");
							}
						}
					}
				}],
				xAxes: [{
					beginAtZero: false,
					display: true,
					gridLines: false,
					ticks: {
						autoSkip: fa,
						maxTicksLimit: 5,
            suggestedMin: -100
					},
					color: 'black'
				}]
			},
			showLines:true
		}
	})
}