Chartjs-How to change BackgroundColor (Tooltips) ChartJs?

by

0👍

✅

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

Leave a comment