Chartjs-Why scatter chart does not show axes?

by

0👍

✅

If you remove the { display: false } you can see the gridlines. Not sure if you need this or not?

If you do really need this, then you can always check if (type === 'line') and if so you add the { display: false } to the options.

var ctx = $('#myChart');

var chart = new Chart (ctx,{
type: "scatter",
		data: {
			"datasets":[
				{
					label:"Series #1",
					fill:false,
					borderColor:"rgba(0,137,176,0.4)",
					backgroundColor:"rgba(0,137,176,0.1)",
					pointBorderColor:"rgba(0,137,176,0.7)",
					pointBackgroundColor:"rgba(0,137,176,0.5)",
					data:[
						{"x":"alpha","y":36.2},
						{"x":"beta","y":36.9},
						{"x":"gamma","y":37},
						{"x":"delta","y":38.3},
						{"x":"epsilon","y":37.9},
						{"x":"zeta","y":37.2}
					]
				}, {
					label:"Series #2",
					fill:false,
					borderColor:"rgba(19,237,150,0.4)",
					backgroundColor:"rgba(19,237,150,0.1)",
					pointBorderColor:"rgba(19,237,150,0.7)",
					pointBackgroundColor:"rgba(19,237,150,0.5)",
					data:[
						{"x":"alpha","y":37.4},
						{"x":"beta","y":37.1},
						{"x":"gamma","y":36.5},
						{"x":"delta","y":36.4},
						{"x":"epsilon","y":36.4},
						{"x":"zeta","y":36.5}
					]
				}, {
					label:"Series #3",
					fill:false,
					borderColor:"rgba(248,231,28,0.4)",
					backgroundColor:"rgba(248,231,28,0.1)",
					pointBorderColor:"rgba(248,231,28,0.7)",
					pointBackgroundColor:"rgba(248,231,28,0.5)",
					data:[
						{"x":"alpha","y":38.1},
						{"x":"beta","y":38.4},
						{"x":"gamma","y":39},
						{"x":"delta","y":39.2},
						{"x":"epsilon","y":38.1},
						{"x":"zeta","y":37.4}
					]
				}],
				"labels":["alpha","beta","gamma","delta","epsilon","zeta"]},
		options: {
			elements: { line: { tension: 0 } },
			scales: {
				xAxes: [
					{
						scaleLabel:{
							display:true,
							labelString:"Date"
						},
						bounds:"data",
						type:"category",
					}
				],
				yAxes:[
					{
						scaleLabel: {
							display:true,
							labelString:"Temperature (°C)"
						},
						bounds:"data",
						ticks:{
							min:35.9,
							max:39.5,
							autoSkip:false,
							stepSize:0.6
						}
					}
				]
			},
			},
	});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<html>
<head>
</head>
<body>
<canvas id="myChart"></canvas>

</body>
</html>

Leave a comment