Y scale problem with values set and to ignore the scale generated from the received values.

[paolodecaro]

Good evening, I kindly ask you for a little help, I need to manually set the values for the Y axis scale. I don't want the values generated by Chart.js to scale, I set a range from 0 to 650, but Chart.js he ignores it and writes me the ones generated by him automatically based on the values received from the skier. I attach the code. Thanks in advance
`

<script src= "https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"> </script> <script src= "https://cdnjs.cloudflare.com/ajax/libs/Chart.js/4.1.2/chart.umd.js"> </script> <title>Bar Chart - Axes Styling</title>

GeeksforGeeks

	<h3>Axes Styling - Bar Chart </h3>
	
	<div style="width:80%;">
		<canvas id="barChart"></canvas>
	</div>
</div>

<script>
	const data = {
		labels: ['Python', 'JavaScript', 'Java', 'C++', 'HTML'],
		datasets: [{
			label: 'GeeksforGeeks Courses',
			data: [200, 350, 300, 180, 120],
			backgroundColor: 'rgba(75, 192, 192, 0.6)',
			borderColor: 'rgba(75, 192, 192, 1)',
			borderWidth: 2,
		}],
	};

	const config = {
		type: 'bar',
		data: data,
		options: {
			scales: {
				x: {
					display: true,
					title: {
						display: true,
						text: 'Programming Languages',
						color: 'blue',
					},
					ticks: {
						color: 'green',
						font: { size: 12, weight: 'bold' },
					},
					grid: {
						color: ['red', 'orange', 
								'yellow', 'green', 'blue'],
						display: true,
						lineWidth: 2,
						drawOnChartArea: false,
					},
					border: {
						display: true,
						color: 'purple',
						width: 2,
					},
				},
				y: {
					display: true,
					title: {
						display: true,
						text: 'Number of Courses',
						color: 'red',
					},
                                             scales: {
                                                     
                                                      min: 0,
                                                      max: 650
                                                         
                                                          },
                                            
					ticks: {
						color: 'orange',
						font: { size: 12, weight: 'bold' },
					},
					grid: {
						display: true,
						drawTicks: false,
					},
				},
			},
		},
	};
	const myChart = 
		new Chart(document.getElementById('barChart'), config);
</script>

`

[paolodecaro]

Grazie a chi mi aiuterà

[paolodecaro]

Good evening and thank you for answering me. I tried the program, now it works. Would there also be a parameter to establish the distance of the notches for each Y axis value?

[stockiNail]

You can use ticks.stepSize. Doc: https://www.chartjs.org/docs/latest/axes/cartesian/linear.html#step-size

[stockiNail]

Have a look to codepen https://codepen.io/stockinail/pen/WNWzpdZ, where I set stepSize: 50

[stockiNail]

@paolodecaro the issue is how you are configuring min and max to Y scale,
The config you posted, is reporting that min and max in a scales object.

Move min and max out of scales at root level of scale config and remove scales.

      y: {
        display: true,
        title: {
          display: true,
          text: "Number of Courses",
          color: "red",
        },
        min: 0,
        max: 650,
        ticks: {
          color: "orange",
          font: { size: 12, weight: "bold" },
        },
        grid: {
          display: true,
          drawTicks: false,
        },
      },

Here a codepen how it works: https://codepen.io/stockinail/pen/WNWzpdZ

Fammi sapere se funziona!

[paolodecaro]

si funziona, grazie

[paolodecaro]

Hello and thanks again, I have this graph that receives data from a Mysql DB with a php program. I have the problem of defining the Y axis with a range from -10 to +100 degrees with steps of 2°. The program I emulated automatically calculates the Y axis values. Could you kindly help me so that the Y axis takes the range I want. Thank you

`

<title>ChartJS - LineGraph</title> <style> .chart-container { width: 640px; height: auto; } </style>

	<!-- javascript -->
	<script type="text/javascript" src="js/jquery.min.js"></script>
	<script type="text/javascript" src="js/Chart.min.js"></script>
	
            
            <script>
            $(document).ready(function(){
$.ajax({
	url : "http://localhost/PhpProgettoMQTT/temperatura_dati.php",
	type : "GET",
	success : function(data){
		console.log(data);
                    
                   
                         
                         
		var Data_Ora = [];
		var Temperaturax = [];
		

		for(var i in data) {
			Data_Ora.push("Data&Ora " + data[i].Data_Ora);
			Temperaturax.push(data[i].Temperatura);
			
		}

		var chartdata = {
			labels: Data_Ora,
			datasets: [
				{
					label: "Temperatura",
					fill: false,
					lineTension: 0.1,
					backgroundColor: "rgba(255, 0, 0, 0.75)",
					borderColor: "rgba(255, 0, 0, 1)",
					pointHoverBackgroundColor: "rgba(59, 89, 152, 1)",
					pointHoverBorderColor: "rgba(59, 89, 152, 1)",
					data: Temperaturax
                                            
				}
				
			]
		};
                    
                    
                              
		var ctx = $("#mycanvas");

		var LineGraph = new Chart(ctx, {
			type: 'line',
			data: chartdata
		});
	},
	error : function(data) {

	}
});

});
</script>

`

Ecco il programma PHP
`

error); } //query to get data from the table $query = "Select Id, Data_Ora, Date_Format(Data_Ora,'%Y-%m-%d') As Datax, Time_Format(Data_Ora,'%H:%i:%s') As Orax, Temperatura FROM BME280_Temperatura_Data ORDER BY Datax DESC, Orax DESC LIMIT 10"; //execute query $result = $mysqli->query($query); //loop through the returned data $data = array(); foreach ($result as $row) { $data[] = $row; } //free memory associated with result $result->close(); //close connection $mysqli->close(); sort($data); //now print the data print json_encode($data); ?>

`

[stockiNail]

Can you provide the data you are getting from PHP in order to create a reproducable sample?

[paolodecaro]

BME280_Temperatura_Data.pdf

Hi here you are data extraction, you just need to take the last 10 rows of the DB. Each row of the DB records the date-time temperature of a sensor which is sent with the MQTT protocol to a Mysql DB. The graph reads the DB every 5 minutes and must update the graph. The X axis will be composed of the date-time to be positioned vertically and not obliquely, while the Y data will be the temperature. The Y axis header values must take those imposed by me. Thank you so much.