Установка глобальных значений по умолчанию Chartjs для отдельных осей

Нет никакой разницы в определении осей между их ролями: x, y или r. Вы можете установить значения по умолчанию с помощью type, т. е. linear, category, time и т. д.

По умолчанию для большинства типов графиков ось x имеет тип "category", а ось y — типа "linear". Если это так для всех ваших диаграмм, вы можете использовать это для установки значений по умолчанию:

if (!Chart.defaults.scales.linear.border){
   Chart.defaults.scales.linear.border = {};
}
Chart.defaults.scales.linear.border.color = 'blue'; // y-axis

if (!Chart.defaults.scales.category.border){
   Chart.defaults.scales.category.border = {};
}
Chart.defaults.scales.category.border.color = 'red'; // x-axis

Однако, если вы собираетесь использовать типы осей, отличные от типов по умолчанию, например, использование линейных осей для x и y, вы можете использовать тот факт, что нужные вам параметры доступны для сценариев, поэтому вы можете установить значения по умолчанию для функций, которые запрашивают роль шкалы во время выполнения, через свойство .axis (его значение может быть x, y или r):

if (!Chart.defaults.scales.linear.border){
   Chart.defaults.scales.linear.border = {};
}
Chart.defaults.scales.linear.border.color = function({scale}){
   if (scale.axis === 'x'){
      return 'red'
   }
   if (scale.axis === 'y'){
      return 'blue'
   }
};

Вот более подробный пример:

for(axisType of ['linear', 'category']){
    Chart.defaults.scales[axisType].border = Chart.defaults.scales[axisType].border ?? {};
    Chart.defaults.scales[axisType].border.color = function({scale}){
        if (scale.axis === 'x'){
            return 'red'
        }
        if (scale.axis === 'y'){
            return 'blue'
        }
    }

    Chart.defaults.scales[axisType].grid = Chart.defaults.scales[axisType].grid ?? {};

    Chart.defaults.scales[axisType].grid.color = 'rgba(0,0,0,0.3)'
    Chart.defaults.scales[axisType].grid.display = function({scale}){
        if (scale.axis === 'x'){
            return true
        }
        if (scale.axis === 'y'){
            return false
        }
    }
    Chart.defaults.scales[axisType].grid.tickColor = function({scale}){
        if (scale.axis === 'x'){
            return 'red';
        }
        if (scale.axis === 'y'){
            return 'blue';
        }
    }

    Chart.defaults.scales[axisType].ticks = Chart.defaults.scales[axisType].ticks ?? {};
    Chart.defaults.scales[axisType].ticks.color = function({scale}){
        if (scale.axis === 'x'){
            return 'rgb(128, 0, 0)';
        }
        if (scale.axis === 'y'){
            return 'rgb(0, 0, 192)';
        }
    }
}
const data = {
    datasets: [
        {
            label: 'Some data',
            showLine: true,
            pointRadius: 2,
            data:
                [ {x: 8.25257, y: 8.25257}, {x: 9.30005, y: 12.30005}, {x: 9.90518, y: 9.90518} ],
        }
    ]
};

const config = {
    type: 'line',
    data: data,
    options: {
        responsive: true,
        maintainAspectRatio: false,
        scales:{
            x:{
                type: 'linear'
            },
        }
    },
};

new Chart(document.querySelector('#chart1'), config);

<div style = "min-height:400px">
    <canvas id = "chart1"></canvas>
</div>
<script src = "https://cdn.jsdelivr.net/npm/chart.js"></script>

В ответ на ответ кикон,

Я используюchartJS с Laravel 11 и настраиваю некоторые глобальные настройки в файле app.js. Я обнаружил, что код в ответе kikon у меня не работает. Поигравшись, я получил следующий код, который, похоже, у меня работал.

/* resources\js\app.js */

Chart.defaults.scale.grid.color = '#fff3';
Chart.defaults.scale.grid.display = function ({ scale }) {
    if (scale.axis === 'x') {
        return false
    }
    if (scale.axis === 'y') {
        return true
    }
}

Chart.defaults.scale.border.color = function ({ scale }) {
    if (scale.axis === 'x') {
        return 'white'
    }
    if (scale.axis === 'y') {
        return 'transparent'
    }
}

Chart.defaults.scale.grid.tickColor = 'transparent';

Я не знаю, это Laravel или в самомchartJS произошли изменения со времени предыдущего ответа, но надеюсь, что это будет кому-то полезно.