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>

Bitte markiere auch die Kommentare, die zur Lösung des Beitrags beigetragen haben

Content-ID: 6925701404

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

Ausgedruckt am: 03.12.2024 um 17:12 Uhr

4 Kommentare

Neuester Kommentar

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.