How to change BackgroundColor (Tooltips) ChartJs?

Question

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';
    }

Answer 1

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