Объект Chart.defaults

Объект Chart.defaults в библиотеке Chart.js представляет собой глобальное хранилище настроек по умолчанию. Через него определяется базовое поведение всех графиков, создаваемых в приложении.

Любая диаграмма, созданная после изменения Chart.defaults, автоматически наследует эти параметры, если локальная конфигурация графика не переопределяет их.

Базовая структура:

Chart.defaults

Пример изменения глобального шрифта:

Chart.defaults.font.family = 'Arial';
Chart.defaults.font.size = 14;
Chart.defaults.color = '#333';

После этого все новые графики будут использовать указанные настройки текста.

Иерархия настроек

В системе конфигурации Chart.js действует принцип приоритетов:

Локальные настройки конкретного графика
Настройки типа диаграммы
Глобальные настройки Chart.defaults

Пример:

Chart.defaults.color = 'blue';

const chart = new Chart(ctx, {
    type: 'bar',
    data,
    options: {
        color: 'red'
    }
});

В данном случае цвет текста будет красным, так как локальная конфигурация имеет более высокий приоритет.

Основные глобальные параметры

Цвет текста

Chart.defaults.color = '#222';

Параметр влияет на:

подписи осей;
легенду;
tooltip;
заголовки;
текстовые элементы.

Шрифты

Глобальная настройка шрифтов:

Chart.defaults.font.family = 'Verdana';
Chart.defaults.font.size = 16;
Chart.defaults.font.weight = 'bold';
Chart.defaults.font.lineHeight = 1.4;

Доступные свойства:

Свойство	Назначение
`family`	Семейство шрифта
`size`	Размер
`style`	Стиль
`weight`	Толщина
`lineHeight`	Межстрочный интервал

Анимация

Настройки анимации применяются ко всем графикам:

Chart.defaults.animation.duration = 2000;
Chart.defaults.animation.easing = 'easeOutBounce';

Отключение анимации:

Chart.defaults.animation = false;

Адаптивность

Chart.defaults.responsive = true;
Chart.defaults.maintainAspectRatio = false;

Описание:

Параметр	Назначение
`responsive`	Автоматическое изменение размеров
`maintainAspectRatio`	Сохранение пропорций

Настройка элементов через `Chart.defaults.elements`

Секция elements управляет внешним видом графических примитивов.

Линии

Chart.defaults.elements.line.borderWidth = 3;
Chart.defaults.elements.line.tension = 0.4;
Chart.defaults.elements.line.borderColor = 'blue';

Свойства:

Свойство	Назначение
`borderWidth`	Толщина линии
`tension`	Степень сглаживания
`borderColor`	Цвет линии
`fill`	Заполнение области

Точки

Chart.defaults.elements.point.radius = 5;
Chart.defaults.elements.point.hoverRadius = 8;
Chart.defaults.elements.point.backgroundColor = 'red';

Столбцы

Chart.defaults.elements.bar.borderWidth = 2;
Chart.defaults.elements.bar.borderRadius = 6;

Дуги

Используются в круговых диаграммах:

Chart.defaults.elements.arc.borderWidth = 1;
Chart.defaults.elements.arc.borderColor = '#fff';

Настройка плагинов через `Chart.defaults.plugins`

Плагины в Chart.js также поддерживают глобальные настройки.

Легенда

Chart.defaults.plugins.legend.position = 'bottom';

Chart.defaults.plugins.legend.labels.color = '#000';
Chart.defaults.plugins.legend.labels.font.size = 14;

Позиции легенды:

top
left
bottom
right

Chart.defaults.plugins.tooltip.backgroundColor = '#222';
Chart.defaults.plugins.tooltip.titleColor = '#fff';
Chart.defaults.plugins.tooltip.bodyColor = '#ddd';
Chart.defaults.plugins.tooltip.padding = 12;

Заголовок

Chart.defaults.plugins.title.display = true;
Chart.defaults.plugins.title.font.size = 20;
Chart.defaults.plugins.title.color = 'darkblue';

Настройка осей

Глобальная конфигурация шкал:

Chart.defaults.scales.linear.beginAtZero = true;

Настройка сетки:

Chart.defaults.scales.linear.grid.color = '#ddd';
Chart.defaults.scales.linear.grid.lineWidth = 1;

Настройка подписей:

Chart.defaults.scales.linear.ticks.color = '#000';
Chart.defaults.scales.linear.ticks.font.size = 12;

Настройки для конкретного типа графика

Кроме общих настроек, доступны параметры по типам диаграмм.

Структура:

Chart.overrides[type]

Пример для круговой диаграммы:

Chart.overrides.pie.plugins.legend.position = 'left';

Пример для bar chart:

Chart.overrides.bar.scales.x.grid.display = false;

Различия между `Chart.defaults` и `Chart.overrides`

Объект	Назначение
`Chart.defaults`	Общие глобальные настройки
`Chart.overrides`	Настройки конкретного типа диаграммы

Глобальная тема оформления

Часто Chart.defaults используется для построения единой темы интерфейса.

Пример тёмной темы:

Chart.defaults.color = '#eee';

Chart.defaults.borderColor = '#444';

Chart.defaults.backgroundColor = '#222';

Chart.defaults.plugins.legend.labels.color = '#fff';

Chart.defaults.scales.linear.grid.color = '#555';

Chart.defaults.scales.linear.ticks.color = '#ddd';

Изменение настроек после создания графиков

Изменение Chart.defaults влияет только на новые графики.

Пример:

Chart.defaults.color = 'red';

new Chart(ctx1, config1);

Chart.defaults.color = 'blue';

new Chart(ctx2, config2);

Первый график останется красным, второй получит синий цвет.

Для обновления существующей диаграммы используется:

chart.update();

Но если настройки были уже скопированы в объект графика, может потребоваться прямое изменение параметров экземпляра.

Сброс глобальных настроек

Полный сброс вручную:

Chart.defaults.font.size = 12;
Chart.defaults.color = '#666';

В библиотеке отсутствует универсальный метод полного восстановления стандартных параметров.

Поэтому в крупных проектах часто создаётся собственный объект темы:

const defaultTheme = {
    color: '#222',
    fontSize: 14
};

Практика организации конфигурации

В больших приложениях глобальные настройки обычно выносятся в отдельный файл.

Пример:

// chart-theme.js

Chart.defaults.color = '#333';

Chart.defaults.font.family = 'Roboto';

Chart.defaults.plugins.legend.position = 'bottom';

Chart.defaults.elements.line.borderWidth = 2;

Подключение:

import './chart-theme.js';

Такой подход:

упрощает поддержку;
обеспечивает единый стиль;
уменьшает дублирование кода;
облегчает изменение темы.

Использование с модульной архитектурой

При работе с ES Modules настройки часто применяются сразу после импорта библиотеки:

import {
    Chart,
    LineController,
    LineElement,
    PointElement,
    LinearScale
} from 'chart.js';

Chart.register(
    LineController,
    LineElement,
    PointElement,
    LinearScale
);

Chart.defaults.color = '#111';

Влияние глобальных настроек на производительность

Чрезмерное количество локальных настроек увеличивает размер конфигурации каждого графика.

Использование Chart.defaults позволяет:

уменьшить объём объектов options;
ускорить разработку;
централизовать стили;
снизить вероятность ошибок.

Особенно заметна польза при генерации большого количества диаграмм.

Частые ошибки

Изменение настроек после создания графика

Неверно:

const chart = new Chart(ctx, config);

Chart.defaults.color = 'red';

Существующий график не обновится автоматически.

Попытка изменить несуществующий путь

Неверно:

Chart.defaults.legend.position = 'bottom';

Правильно:

Chart.defaults.plugins.legend.position = 'bottom';

Смешивание `defaults` и `overrides`

Неверно:

Chart.defaults.pie.legend.position = 'left';

Правильно:

Chart.overrides.pie.plugins.legend.position = 'left';

Глубокая структура объекта

Объект Chart.defaults имеет древовидную структуру:

Chart.defaults = {
    responsive,
    maintainAspectRatio,
    color,
    font,
    animation,
    plugins,
    scales,
    elements
}

Каждая секция может содержать вложенные объекты.

Комбинирование глобальных и локальных настроек

Глобальные параметры задают основу:

Chart.defaults.font.family = 'Tahoma';
Chart.defaults.color = '#444';

Локальные — уточняют поведение:

const chart = new Chart(ctx, {
    type: 'line',
    data,
    options: {
        plugins: {
            legend: {
                position: 'right'
            }
        }
    }
});

Такой подход считается оптимальным для крупных интерфейсов.

Пример полной глобальной конфигурации

Chart.defaults.responsive = true;

Chart.defaults.maintainAspectRatio = false;

Chart.defaults.color = '#222';

Chart.defaults.font.family = 'Inter';
Chart.defaults.font.size = 14;

Chart.defaults.animation.duration = 1000;

Chart.defaults.elements.line.borderWidth = 2;

Chart.defaults.elements.point.radius = 4;

Chart.defaults.plugins.legend.position = 'bottom';

Chart.defaults.plugins.tooltip.backgroundColor = '#111';

Chart.defaults.scales.linear.beginAtZero = true;

Chart.defaults.scales.linear.grid.color = '#ddd';

Архитектурная роль `Chart.defaults`

Объект Chart.defaults выполняет функцию централизованного слоя конфигурации. Через него реализуются:

единый визуальный стиль;
повторное использование настроек;
корпоративные темы;
стандартизация графиков;
сокращение объёма кода;
упрощение поддержки интерфейса.

В крупных системах Chart.defaults становится основой всей визуальной инфраструктуры диаграмм.

Объект Chart.defaults

Иерархия настроек

Основные глобальные параметры

Цвет текста

Шрифты

Анимация

Адаптивность

Настройка элементов через Chart.defaults.elements

Линии

Точки

Столбцы

Дуги

Настройка плагинов через Chart.defaults.plugins

Легенда

Tooltip

Заголовок

Настройка осей

Настройки для конкретного типа графика

Различия между Chart.defaults и Chart.overrides

Глобальная тема оформления

Изменение настроек после создания графиков

Сброс глобальных настроек

Практика организации конфигурации

Использование с модульной архитектурой

Влияние глобальных настроек на производительность

Частые ошибки

Изменение настроек после создания графика

Попытка изменить несуществующий путь

Смешивание defaults и overrides

Глубокая структура объекта

Комбинирование глобальных и локальных настроек

Пример полной глобальной конфигурации

Архитектурная роль Chart.defaults

Настройка элементов через `Chart.defaults.elements`

Настройка плагинов через `Chart.defaults.plugins`

Различия между `Chart.defaults` и `Chart.overrides`

Смешивание `defaults` и `overrides`

Архитектурная роль `Chart.defaults`