[Chartjs]-How to Chart.Js, change the color by pressing the button (or any element)?

by

4👍

✅

You can just go inside of the chart object, into the options and change the color of the grid lines:

const lightGridLineColor = 'black';
const darkGridLineColor = 'yellow'

const myBarChart = new Chart(ctx, config);

document.getElementById('chartChange').addEventListener('click', () => {
  const toDarkMode = myBarChart.options.scales.x.grid.color === lightGridLineColor;
  if (toDarkMode) {
    myBarChart.options.scales.x.grid.color = darkGridLineColor;
    myBarChart.options.scales.y.grid.color = darkGridLineColor
  } else {
    myBarChart.options.scales.x.grid.color = lightGridLineColor;
    myBarChart.options.scales.y.grid.color = lightGridLineColor
  }

  myBarChart.update();
})

Live sample:

const lightGridLineColor = 'black';
const darkGridLineColor = 'yellow'

// bar chart start
const chartData = {
  labels: ['Ocak', 'Şubat', 'Mart', 'Nisan', 'Mayıs', 'Haziran', 'Temmuz', 'Ağustos', 'Eylül', 'Ekim', 'Kasım', 'Aralık'],
  datasets: [{
      label: "Yatırımlar",
      backgroundColor: "#1355FF",
      borderWidth: 0,
      borderRadius: 5,
      data: [20423, 40123, 60313, 80412, 40414, 1932, 40131, 10124, 30578, 50421, 60124, 14512]
    }, {
      label: "Çekimler",
      backgroundColor: "#57D3DD",
      borderRadius: 5,
      borderWidth: 0,
      data: [60732, 30125, 20712, 50252, 30689, 50234, 20464, 30123, 10245, 15123, 40126, 60126]
    },

  ]
};

let value = 80000;
const ctx = document.getElementById('barChart');
const myBarChart = new Chart(ctx, {

  type: "bar",
  data: chartData,
  drawBorder: false,
  options: {
    responsive: true,
    maintainAspectRatio: false,
    scales: {
      x: {
        title: {
          display: false
        },
        grid: {
          display: false
        },
        ticks: {
          color: "#718096"
        }
      },
      y: {
        title: {
          display: false
        },
        min: 0,
        max: 80000,
        ticks: {
          stepSize: 20000,
          color: "#718096",
          callback: function(value, index, values) {
            return value * 0.001 + " K";
          }
        },
        grid: {
          color: '#EDF2F7'
        }
      }
    },
    plugins: {
      legend: {
        position: "top",
        labels: {
          font: {
            size: 12,
            weight: 500
          },
          color: "#2D3748",
          boxWidth: 8,
          boxHeight: 8,
          usePointStyle: true,
          pointStyle: "circle"
        }
      }
    }
  }
});

document.getElementById('chartChange').addEventListener('click', () => {
  const toDarkMode = myBarChart.options.scales.x.grid.color === lightGridLineColor;
  if (toDarkMode) {
    myBarChart.options.scales.x.grid.color = darkGridLineColor;
    myBarChart.options.scales.y.grid.color = darkGridLineColor;
  } else {
    myBarChart.options.scales.x.grid.color = lightGridLineColor;
    myBarChart.options.scales.y.grid.color = lightGridLineColor;
  }

  myBarChart.update();
});

// bar chart end
.container {
  max-width: 1200px;
  width: 100%;
  margin: 0 auto;
}
<div class="container">
  <canvas id="barChart" width="400" height="240"></canvas>
</div>
<input type="checkbox" name="chartChange" id="chartChange">
<label for="chartChange">Click to change chart color text</label>

<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>

Leave a comment