Chart.js - Skala rechts von der Grafik statt links

Einen wunderschönen Abend,

ich habe ein Problem mit Chart.JS und vielleicht kennt sich ja jemand damit aus und kann mir weiter helfen. Mit google komme ich nicht weiter.

Im Grund würde ich einfach gerne einen Graph haben mit 2 Linien. Das klappt auch soweit. Ich wollte nur gerne eine Y-Achse rechts vom Graph haben.

Das ist mein aktueller Code, den ich mir zusammen gesucht habe. Vielleicht weiss jemand wieso das nicht geht?

Vielen Dank und mit freundlichen Grüßen

canvas id="myChart270423" width="1000" height="400"></canvas>  
<script>

const ctx270423 = document.getElementById('myChart270423').getContext('2d');  
const myChart270423 = new Chart(ctx270423, {
   data : {
      labels: ['00-01', '01-02', '02-03', '03-04', '04-05', '05-06', '06-07', '07-08', '08-09', '09-10', '10-11', '11-12', '12-13', '13-14', '14-15', '15-16', '16-17', '17-18', '18-19', '19-20', '20-21', '21-22', '22-23', '23-24'],  
      datasets: [
         {
            type: 'line',  
            label: 'Temperatur',   
            yAxisID: 'A',  
            data: [3.10, 2.20, 1.50, 1.10, 0.90, 0.70, 0.40, 0.30, 1.40, 4.20, 6.20, 8.50, 10.00, 11.20, 11.80, 12.40, 12.40, 12.20, 12.10, 11.80, 10.70, 9.60, 9.10, 8.40],
            borderColor: 'rgb(75, 192, 192)',  
            fill: false,
            tension: 0.1
         },
         {
            type: 'line',  
            label: 'Luftdruck',   
            yAxisID: 'B',  
            data: [959.10, 959.20, 959.30, 959.00, 959.00, 958.70, 958.70, 958.70, 959.10, 959.50, 959.50, 959.50, 959.30, 959.10, 958.80, 958.40, 957.90, 957.40, 957.10, 956.90, 956.70, 956.70, 956.40, 955.90],
            borderColor: 'rgb(252, 109, 109)',  
            fill: false,
            tension: 0.1
         }
     ], 
     options: {
         responsive: true,
         scales: {
            A: {
                  type: 'linear',   
                  position: 'left',  
                  ticks: { beginAtZero: true, color: 'rgb(75, 192, 192)' },  
                  grid: { display: false }
            },
            B:   {
                  type: 'linear',   
                  position: 'right',  
                  ticks: { beginAtZero: true, color: 'rgb(75, 192, 192)' },  
                  grid: { display: false }
            }
            
         }
     }
             
   }
});
</script>

Please also mark the comments that contributed to the solution of the article

Content-Key: 6925701404

Url: https://administrator.de/contentid/6925701404

Printed on: April 27, 2024 at 07:04 o'clock

4 Comments

Latest comment

Du hast das dataset Object falsch verschachtelt ... Guckst du
https://www.chartjs.org/docs/latest/samples/line/multi-axis.html

const ctx270423 = document.getElementById('myChart270423');  
const myChart270423 = new Chart(ctx270423, {
	type: 'line',  
	data : {
	  labels: ['00-01', '01-02', '02-03', '03-04', '04-05', '05-06', '06-07', '07-08', '08-09', '09-10', '10-11', '11-12', '12-13', '13-14', '14-15', '15-16', '16-17', '17-18', '18-19', '19-20', '20-21', '21-22', '22-23', '23-24'],  
	  datasets: [
		 {
			type: 'line',  
			label: 'Temperatur',   
			yAxisID: 'yA',  
			data: [3.10, 2.20, 1.50, 1.10, 0.90, 0.70, 0.40, 0.30, 1.40, 4.20, 6.20, 8.50, 10.00, 11.20, 11.80, 12.40, 12.40, 12.20, 12.10, 11.80, 10.70, 9.60, 9.10, 8.40],
			borderColor: 'rgb(75, 192, 192)',  
			fill: false,
			tension: 0.1
		 },
		 {
			type: 'line',  
			label: 'Luftdruck',   
			yAxisID: 'yB',  
			data: [959.10, 959.20, 959.30, 959.00, 959.00, 958.70, 958.70, 958.70, 959.10, 959.50, 959.50, 959.50, 959.30, 959.10, 958.80, 958.40, 957.90, 957.40, 957.10, 956.90, 956.70, 956.70, 956.40, 955.90],
			borderColor: 'rgb(252, 109, 109)',  
			fill: false,
			tension: 0.1
		 }
	     ]
	},
	options: {
		responsive: true,
		scales: {
			yA: {
				type: 'linear',   
				position: 'left',  
				display: true,
				ticks: { beginAtZero: true, color: 'rgb(75, 192, 192)' },  
				grid: { display: false }
			},
			yB: {
				type: 'linear',  
				position: 'right',  
				display: true,
				ticks: { beginAtZero: true, color: 'rgb(75, 192, 192)' },  
				grid: { display: false }
			}
		}
	}
});

Cheers briggs

Hallo,

sogar den Code angepasst. Danke für deine Mühe!

Ich habe das gelesen. Was ich dabei nicht verstanden habe: Wenn ich jetzt als drittes noch die Regenmenge zunehme als BAR, dann wäre doch der obere Type mit line nicht mehr richtig? Kann ich dann dort ein Array definieren?

type: ['line', 'bar']  

oder wie sähe es dann aus?

Guckst du hier Combo bar/line
Du kannst für jedes Dataset den Chart-Typ mit dem type Parameter festlegen.
Also bspw. generell für den Chart "line" festlegen aber in einem bestimmten Dataset dann den Typ mit type: 'bar' überschreiben, oder umgekehrt.

Ok, prima. Vielen Dank!

German solved Question HTML JavaScript Libraries & Toolkits Web Development