I have to code a chart with ChartJS but I dont get how I can change the Tooltip backgroundColor. I saw many YouTube Videos but nothing worked on my code. I am new to JavaScript so maybe I forgot something? Can somebody have a look on my code? I would really appreciate that! <3
The Code in jsfiddle: https://jsfiddle.net/rp2tmby4/5/#&togetherjs=0I7aHarRFz
document.addEventListener('DOMContentLoaded', function() {
Chart.defaults.backgroundColor = false;
Chart.defaults.borderColor = '#36A2EB';
Chart.defaults.color = '#ffffff';
// Daten für das Diagramm
const chartData = {
2010: [107, 90, 200],
2011: [120, 100, 220],
2012: [130, 110, 240],
2013: [140, 120, 260],
2014: [107, 130, 200],
2015: [190, 150, 220],
2016: [230, 190, 240],
2017: [250, 220, 260],
2018: [260, 240, 200],
2019: [280, 290, 220],
2020: [285, 340, 240],
2021: [310, 420, 260],
// ...
// Hier kannst du die Daten für jedes Jahr hinzufügen
// Beispiel: 2014: [150, 700, 280]
};
const labels = ['Red', 'Orange', 'Yellow']
const data = {
datasets: [{
label: 'Stromverbrauch in TWh',
data: [107, 500, 200],
backgroundColor: [
'rgba(192, 151, 105, 0.9)',
'rgba(162, 109, 47, 0.9)',
'rgba(243, 198, 69, 0.9)',
'rgba(255, 155, 0, 0.9)',
],
borderColor: 'rgb(120,162,211)', // Weiße Rahmenfarbe
//borderWidth: 0.6,
}],
labels: labels,
};
// Optionen für das Diagramm
const options = {
animation: {
animateRotate: true,
animateScale: true,
},
legend: {
position: 'top',
labels: {
fontColor: '#78a2d3',
},
},
scales: {
reverse: false,
r: {
ticks: {
beginAtZero: true,
z: 3, // Z-Index für die Skalen (höherer Wert bringt sie weiter nach vorne)
color: '#ffffff', // Farbe der Skalennummern
backdropColor: 'transparent' // Hintergrundfarbe der Skalennummern entfernen
}
}
}
};
// Erstellung des Diagramms
const ctx = document.getElementById('polarAreaChart').getContext('2d');
const polarAreaChart = new Chart(ctx, {
type: 'polarArea',
data: data,
options: options,
});
// Schieberegler für Jahreszahlen
const yearSlider = document.getElementById('yearRange');
const yearLabel = document.getElementById('year-label');
yearSlider.addEventListener('input', function() {
const selectedYear = yearSlider.value;
yearLabel.textContent = selectedYear;
polarAreaChart.data.datasets[0].data = chartData[selectedYear];
polarAreaChart.update();
});
// Initialisiere das Jahr-Label mit dem Startwert
yearLabel.textContent = yearSlider.value;
const config = {
type: 'polarAreaChart',
data: {
color: 'rgb(0,231,231)',
},
options: {
plugins: {
tooltip: {
backgroundColor: 'green',
}
}
}
};
const myChart = new Chart(document.getElementById('myChart'), config);
});
Also tried this and many other things:
custom: function(tooltip) {
if (!tooltip) return;
// Hintergrundfarbe des Tooltips auf Grün setzen
tooltip.backgroundColor = 'green';
}
The backgroundColor in the tooltip section is working. The reason it is not working for you is because you are trying to create a new chart but that canvas does not exist. If you add it in the config of your existing chart it displays fine.
document.addEventListener('DOMContentLoaded', function() {
Chart.defaults.backgroundColor = false;
Chart.defaults.borderColor = '#36A2EB';
Chart.defaults.color = '#000000';
// Daten für das Diagramm
const chartData = {
2010: [107, 90, 200],
2011: [120, 100, 220],
2012: [130, 110, 240],
2013: [140, 120, 260],
2014: [107, 130, 200],
2015: [190, 150, 220],
2016: [230, 190, 240],
2017: [250, 220, 260],
2018: [260, 240, 200],
2019: [280, 290, 220],
2020: [285, 340, 240],
2021: [310, 420, 260],
// ...
// Hier kannst du die Daten für jedes Jahr hinzufügen
// Beispiel: 2014: [150, 700, 280]
};
const labels = ['Red', 'Orange', 'Yellow']
const data = {
datasets: [{
label: 'Stromverbrauch in TWh',
data: [107, 500, 200],
backgroundColor: [
'rgba(192, 151, 105, 0.9)',
'rgba(162, 109, 47, 0.9)',
'rgba(243, 198, 69, 0.9)',
'rgba(255, 155, 0, 0.9)',
],
borderColor: 'rgb(120,162,211)', // Weiße Rahmenfarbe
//borderWidth: 0.6,
}],
labels: labels,
};
// Optionen für das Diagramm
const options = {
// Added this plugins block to your config:
plugins: {
tooltip: {
backgroundColor: 'green'
},
legend: {
position: 'top',
labels: {
color: '#78a2d3',
},
},
},
layout: {
padding: {
top: 30, // Hier kannst du den gewünschten Abstand einstellen
},
},
animation: {
animateRotate: true,
animateScale: true,
},
scales: {
reverse: false,
r: {
ticks: {
beginAtZero: true,
z: 3, // Z-Index für die Skalen (höherer Wert bringt sie weiter nach vorne)
color: '#000000', // Farbe der Skalennummern
backdropColor: 'transparent' // Hintergrundfarbe der Skalennummern entfernen
}
}
}
};
// Erstellung des Diagramms
const ctx = document.getElementById('polarAreaChart').getContext('2d');
const polarAreaChart = new Chart(ctx, {
type: 'polarArea',
data: data,
options: options,
});
// Schieberegler für Jahreszahlen
const yearSlider = document.getElementById('yearRange');
const yearLabel = document.getElementById('year-label');
yearSlider.addEventListener('input', function() {
const selectedYear = yearSlider.value;
yearLabel.textContent = selectedYear;
polarAreaChart.data.datasets[0].data = chartData[selectedYear];
polarAreaChart.update();
});
// Initialisiere das Jahr-Label mit dem Startwert
yearLabel.textContent = yearSlider.value;
});
https://jsfiddle.net/qzge7hdw/1/
Also your legend config was in the wrong place with wrong names, corrected that also for you