Chart.js only displays font changes upon hover

Question

Problem

I have a Laravel website with multiple charts and a 'nightmode' button. This button turns the page dark and the text light.

The function looks like this:

   function darkMode(){
    var element = document.getElementsByClassName("day")[0];
    element.classList.toggle("night");

    if(Chart.defaults.global.defaultFontColor == 'black'){
        Chart.defaults.global.defaultFontColor = 'white'

    } else {
        Chart.defaults.global.defaultFontColor = 'black'
    }
}

This function works perfectly except for the following issue: When the button is pressed the new font color only shows when the cursor hovers over the chart.

Steps taken

• I have tried to update the chart (as is advised in the chart.js documentation) after the nightmode function finished with chart.update()

However I get the error stating:

chart.update is not a function.

• Selecting a specific chart is not an option since I want to use this function to work on multiple pages with multiple charts.
• Making the entire webpage reload for the changes to take place is not preferred either.

Goal

To have the chart text change color when the 'nightmode' button is pressed and for the user to not have to hover over the chart first for the changes to take place.

Extra info

• Chart.js version 2.9.3 (installed using brew/npm)
• Tested on both Safari and Chrome

Any tips?

Answer 1

var barChartData = {
			labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
			datasets: [{
				label: 'Dataset 1',
				backgroundColor: [
					window.chartColors.red,
					window.chartColors.orange,
					window.chartColors.yellow,
					window.chartColors.green,
					window.chartColors.blue,
					window.chartColors.purple,
					window.chartColors.red
				],
				yAxisID: 'y-axis-1',
				data: [
					randomScalingFactor(),
					randomScalingFactor(),
					randomScalingFactor(),
					randomScalingFactor(),
					randomScalingFactor(),
					randomScalingFactor(),
					randomScalingFactor()
				]
			}, {
				label: 'Dataset 2',
				backgroundColor: window.chartColors.grey,
				yAxisID: 'y-axis-2',
				data: [
					randomScalingFactor(),
					randomScalingFactor(),
					randomScalingFactor(),
					randomScalingFactor(),
					randomScalingFactor(),
					randomScalingFactor(),
					randomScalingFactor()
				]
			}]

		};
		window.onload = function() {
			var ctx = document.getElementById('canvas').getContext('2d');
			window.myBar = new Chart(ctx, {
				type: 'bar',
				data: barChartData,
				options: {
					responsive: true,
					title: {
						display: true,
						text: 'Chart.js Bar Chart - Multi Axis'
					},
					tooltips: {
						mode: 'index',
						intersect: true
					},
					scales: {
						yAxes: [{
							type: 'linear', // only linear but allow scale type registration. This allows extensions to exist solely for log scale for instance
							display: true,
							position: 'left',
							id: 'y-axis-1',
						}, {
							type: 'linear', // only linear but allow scale type registration. This allows extensions to exist solely for log scale for instance
							display: true,
							position: 'right',
							id: 'y-axis-2',
							gridLines: {
								drawOnChartArea: false
							}
						}],
					}
				}
			});
		};

		document.getElementById('changeColor').addEventListener('click', function() {
			Chart.defaults.global.defaultFontColor = "#ff0000"
			window.myBar.update();
		});

<script src="https://www.chartjs.org/samples/latest/utils.js"></script>
<script src="https://www.chartjs.org/dist/2.9.3/Chart.min.js"></script>
<div style="width: 75%">
		<canvas id="canvas"></canvas>
	</div>
	<button id="changeColor">Change To Red Color</button>

Hope this helps.