According to the documentation, Chartjs (v4) grid styling is controlled using the options.scales[scaleId].grid
namespace. I can control the styling globally of select elements using statements like:
Chart.defaults.scale.grid.display = true;
Chart.defaults.scale.grid.lineWidth = 5;
However, I can not seem to find the syntax for controlling defaults for individual axes using the [scaleId]
portion of the above namespace. I have tried the following to no avail:
Chart.defaults.scales.x.grid.display = true;
Chart.defaults.scales['x'].grid.display = true;
What is the proper syntax to set defaults for the axes individually?
TLDR; I am setting global display properties in a separate file and importing those settings into each chart (I have over 20 charts) within a Vue 3 project.
chartDefaults.js
// Set project defaults
import Chart from "chart.js/auto"
// general
Chart.defaults.responsive = true;
Chart.defaults.maintainAspectRatio = false;
// animations
Chart.defaults.animation.duration = 2000;
Chart.defaults.animation.easing = 'easeInOutQuart';
...
I’ve inspected the Chart.defaults
object, but I don’t see references to the individual axes within the defaults object.