Изменение глобальных шрифтов и цветов

В библиотеке Chart.js большинство визуальных параметров можно задавать двумя способами:

  • локально — внутри конкретного графика;
  • глобально — через объект Chart.defaults.

Глобальные параметры применяются ко всем графикам автоматически. Такой подход особенно важен при создании:

  • административных панелей;
  • аналитических систем;
  • корпоративных интерфейсов;
  • библиотек компонентов;
  • единого дизайн-стиля приложения.

Объект Chart.defaults

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

Chart.defaults

Через него можно изменять:

  • шрифты;
  • цвета;
  • толщину линий;
  • стили легенд;
  • параметры осей;
  • оформление всплывающих подсказок;
  • поведение анимаций.

Пример базовой настройки:

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

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

Глобальное изменение цвета текста

Свойство Chart.defaults.color

Параметр:

Chart.defaults.color

определяет основной цвет текста во всей библиотеке.

Он применяется к:

  • подписям осей;
  • легендам;
  • tooltip;
  • заголовкам;
  • значениям шкал.

Пример:

Chart.defaults.color = '#444';

Использование HEX-цветов

Chart.defaults.color = '#1E293B';

Использование RGB

Chart.defaults.color = 'rgb(30, 41, 59)';

Использование RGBA

Chart.defaults.color = 'rgba(30, 41, 59, 0.8)';

Использование CSS-переменных

Особенно удобно в больших приложениях.

Chart.defaults.color = getComputedStyle(document.documentElement)
    .getPropertyValue('--text-color');

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

Объект Chart.defaults.font

Все параметры шрифтов находятся внутри:

Chart.defaults.font

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

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

Изменение семейства шрифта

Свойство family

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

Несколько шрифтов

Chart.defaults.font.family =
    '"Inter", "Segoe UI", sans-serif';

Использование Google Fonts

HTML:

<link
  href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600&display=swap"
  rel="stylesheet"
/>

Jav * ascript:

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

Изменение размера шрифта

Свойство size

Chart.defaults.font.size = 16;

Все текстовые элементы графиков увеличатся автоматически.

Маленькие размеры

Chart.defaults.font.size = 10;

Подходит для:

  • компактных виджетов;
  • мобильных экранов;
  • dense-интерфейсов.

Крупные размеры

Chart.defaults.font.size = 20;

Подходит для:

  • презентаций;
  • дашбордов;
  • телевизионных панелей;
  • аналитических экранов.

Изменение толщины шрифта

Свойство weight

Chart.defaults.font.weight = 'bold';

Допустимые значения:

'normal'
'bold'
'lighter'
'bolder'

Также поддерживаются числовые значения:

Chart.defaults.font.weight = 600;

Изменение стиля шрифта

Свойство style

Chart.defaults.font.style = 'italic';

Другие варианты:

'normal'
'italic'
'oblique'

Межстрочный интервал

Свойство lineHeight

Chart.defaults.font.lineHeight = 1.5;

или:

Chart.defaults.font.lineHeight = '24px';

Полный пример глобальной настройки шрифтов

Chart.defaults.color = '#334155';

Chart.defaults.font.family =
    '"Inter", sans-serif';

Chart.defaults.font.size = 14;

Chart.defaults.font.weight = 500;

Chart.defaults.font.lineHeight = 1.4;

Изменение фона графиков

У библиотеки нет глобального свойства:

Chart.defaults.backgroundColor

потому что фон обычно задаётся:

  • у dataset;
  • через canvas;
  • через plugin;
  • средствами CSS.

Изменение фона через CSS

canvas {
    background: #FFFFFF;
}

Фон конкретного контейнера

.chart-wrapper {
    background: #F8FAFC;
    padding: 20px;
    border-radius: 12px;
}

Глобальные цвета сетки

Настройка grid

Chart.defaults.scale.grid.color =
    'rgba(0,0,0,0.1)';

После этого все линии сетки станут полупрозрачными.

Тёмная сетка

Chart.defaults.scale.grid.color =
    'rgba(255,255,255,0.08)';

Используется в dark theme.

Глобальная настройка осей

Цвет подписей

Chart.defaults.scale.ticks.color = '#64748B';

Шрифт подписей

Chart.defaults.scale.ticks.font.size = 12;

Chart.defaults.scale.ticks.font.family =
    'Inter';

Цвет линий оси

Chart.defaults.scale.border.color =
    '#CBD5E1';

Глобальная настройка легенды

Изменение текста легенды

Chart.defaults.plugins.legend.labels.color =
    '#1E293B';

Изменение шрифта легенды

Chart.defaults.plugins.legend.labels.font =
{
    size: 14,
    family: 'Inter',
    weight: '600'
};

Глобальная настройка заголовков

Title plugin

Chart.defaults.plugins.title.color =
    '#0F172A';

Chart.defaults.plugins.title.font =
{
    size: 20,
    weight: 'bold'
};

Глобальная настройка tooltip

Цвет текста

Chart.defaults.plugins.tooltip.bodyColor =
    '#FFFFFF';

Chart.defaults.plugins.tooltip.titleColor =
    '#FFFFFF';

Цвет фона

Chart.defaults.plugins.tooltip.backgroundColor =
    '#0F172A';

Шрифты tooltip

Chart.defaults.plugins.tooltip.bodyFont =
{
    size: 13,
    family: 'Inter'
};

Chart.defaults.plugins.tooltip.titleFont =
{
    size: 14,
    weight: 'bold'
};

Создание собственной темы оформления

Один из лучших подходов — вынести все настройки в отдельный модуль.

Файл chart-theme.js

export function applyChartTheme() {

    Chart.defaults.color = '#CBD5E1';

    Chart.defaults.font.family =
        '"Inter", sans-serif';

    Chart.defaults.font.size = 13;

    Chart.defaults.scale.grid.color =
        'rgba(255,255,255,0.06)';

    Chart.defaults.scale.ticks.color =
        '#94A3B8';

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

    Chart.defaults.plugins.tooltip.backgroundColor =
        '#0F172A';
}

Подключение темы

import { applyChartTheme } from './chart-theme.js';

applyChartTheme();

Светлая и тёмная темы

Светлая тема

function setLightTheme() {

    Chart.defaults.color = '#334155';

    Chart.defaults.scale.grid.color =
        'rgba(0,0,0,0.08)';
}

Тёмная тема

function setDarkTheme() {

    Chart.defaults.color = '#E2E8F0';

    Chart.defaults.scale.grid.color =
        'rgba(255,255,255,0.08)';
}

Переключение тем в реальном времени

const isDark = true;

if (isDark) {
    setDarkTheme();
} else {
    setLightTheme();
}

Использование CSS Custom Properties

Современный подход — синхронизация Chart.js с CSS-темой сайта.

CSS

:root {

    --chart-text: #1E293B;
    --chart-grid: rgba(0,0,0,0.08);
}

.dark {

    --chart-text: #E2E8F0;
    --chart-grid: rgba(255,255,255,0.08);
}

Javascript

const styles =
    getComputedStyle(document.documentElement);

Chart.defaults.color =
    styles.getPropertyValue('--chart-text');

Chart.defaults.scale.grid.color =
    styles.getPropertyValue('--chart-grid');

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

Иногда требуется вернуть стандартное оформление.

Полный сброс

Chart.defaults = Chart.overrides;

Частичный сброс

Chart.defaults.color = '#666';

Chart.defaults.font.size = 12;

Локальное переопределение глобальных параметров

Даже при наличии глобальных настроек конкретный график может использовать собственные параметры.

Пример

new Chart(ctx, {

    type: 'bar',

    data: data,

    options: {

        plugins: {

            legend: {

                labels: {

                    color: '#EF4444'
                }
            }
        }
    }
});

Локальные параметры всегда имеют приоритет над глобальными.

Порядок применения стилей

Chart.js использует следующую последовательность:

  1. встроенные значения библиотеки;
  2. глобальные настройки Chart.defaults;
  3. настройки типа графика;
  4. локальные настройки конкретного графика.

Типичные ошибки

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

Неправильно:

const chart = new Chart(ctx, config);

Chart.defaults.color = 'red';

График уже был создан со старыми параметрами.

Правильный подход

Chart.defaults.color = 'red';

const chart = new Chart(ctx, config);

Ошибки подключения шрифтов

Если браузер не успел загрузить шрифт:

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

то график сначала будет отображён системным шрифтом.

Решение

Создавать графики после загрузки шрифтов:

document.fonts.ready.then(() => {

    createCharts();
});

Производительность

Глобальные настройки значительно эффективнее локальных, потому что:

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

Практический пример полноценной темы

Chart.defaults.color = '#CBD5E1';

Chart.defaults.font.family =
    '"Inter", sans-serif';

Chart.defaults.font.size = 13;

Chart.defaults.font.weight = 500;

Chart.defaults.scale.grid.color =
    'rgba(255,255,255,0.06)';

Chart.defaults.scale.border.color =
    'rgba(255,255,255,0.1)';

Chart.defaults.scale.ticks.color =
    '#94A3B8';

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

Chart.defaults.plugins.legend.labels.font =
{
    size: 13
};

Chart.defaults.plugins.title.color =
    '#F8FAFC';

Chart.defaults.plugins.title.font =
{
    size: 18,
    weight: 'bold'
};

Chart.defaults.plugins.tooltip.backgroundColor =
    '#0F172A';

Chart.defaults.plugins.tooltip.bodyColor =
    '#FFFFFF';

Chart.defaults.plugins.tooltip.titleColor =
    '#FFFFFF';
Оглавление