Включение и позиционирование заголовка

В библиотеке Chart.js заголовок графика управляется через встроенный плагин title, который входит в систему plugins. Его активация и настройка выполняются исключительно через объект конфигурации графика.

Базовая структура подключения:

const config = {
  type: 'bar',
  data: {
    labels: ['Янв', 'Фев', 'Мар'],
    datasets: [{
      label: 'Продажи',
      data: [10, 20, 15]
    }]
  },
  options: {
    plugins: {
      title: {
        display: true,
        text: 'Динамика продаж'
      }
    }
  }
};

Ключевым параметром является display. Без его включения заголовок не отображается независимо от остальных настроек.

Основные параметры заголовка

display

Определяет активность заголовка:

title: {
  display: true
}

Если значение false, заголовок полностью исключается из рендеринга.

text

Задает содержимое заголовка. Поддерживаются строки и массив строк.

title: {
  display: true,
  text: 'Анализ продаж за квартал'
}

Многострочный вариант:

title: {
  display: true,
  text: ['Анализ продаж', '1 квартал 2026']
}

При использовании массива каждая строка отображается на отдельной линии.

Позиционирование заголовка

В Chart.js позиционирование заголовка задается через параметр position. Он определяет расположение блока заголовка относительно области графика.

position: top

Размещение над областью построения:

title: {
  display: true,
  text: 'Отчет по данным',
  position: 'top'
}

Это значение используется по умолчанию.

position: bottom

Размещение под графиком:

title: {
  display: true,
  text: 'Отчет по данным',
  position: 'bottom'
}

Такое расположение часто используется при необходимости освободить верхнюю часть визуализации.

Выравнивание заголовка

Параметр align управляет горизонтальным расположением текста внутри доступного пространства.

align: center

title: {
  display: true,
  text: 'Продажи',
  align: 'center'
}

Центрирование применяется по умолчанию.

align: start

title: {
  display: true,
  text: 'Продажи',
  align: 'start'
}

Заголовок смещается к началу контейнера (слева для LTR-раскладки).

align: end

title: {
  display: true,
  text: 'Продажи',
  align: 'end'
}

Заголовок выравнивается по правому краю.

Настройка шрифта заголовка

Шрифт управляется через объект font, который позволяет контролировать внешний вид текста.

title: {
  display: true,
  text: 'Финансовый отчет',
  font: {
    size: 18,
    family: 'Arial',
    weight: 'bold',
    style: 'normal'
  }
}

Основные параметры:

  • size — размер шрифта в пикселях
  • family — семейство шрифтов
  • weight — насыщенность (normal, bold, 600 и т.д.)
  • style — начертание (normal, italic)

Цвет заголовка

Параметр color задает цвет текста:

title: {
  display: true,
  text: 'График температуры',
  color: '#333'
}

Поддерживаются любые CSS-цвета: HEX, RGB, RGBA, именованные цвета.

Отступы заголовка

Параметр padding управляет внутренними отступами вокруг текста.

единое значение

title: {
  display: true,
  text: 'Заголовок',
  padding: 10
}

раздельные отступы

title: {
  display: true,
  text: 'Заголовок',
  padding: {
    top: 12,
    bottom: 12
  }
}

Отступы влияют на расстояние между заголовком и областью графика.

Комбинированная конфигурация

Полная настройка заголовка включает позиционирование, выравнивание и стилизацию:

const config = {
  type: 'line',
  data: {
    labels: ['Пн', 'Вт', 'Ср'],
    datasets: [{
      label: 'Посещения',
      data: [30, 45, 28]
    }]
  },
  options: {
    plugins: {
      title: {
        display: true,
        text: 'Посещаемость сайта',
        position: 'top',
        align: 'center',
        color: '#222',
        font: {
          size: 20,
          weight: '600'
        },
        padding: {
          top: 10,
          bottom: 20
        }
      }
    }
  }
};

Взаимодействие с другими элементами интерфейса

Заголовок в Chart.js является частью системы plugins и взаимодействует с легендой, осями и областью построения.

  • При увеличении padding заголовка уменьшается доступное пространство графика
  • При изменении position перераспределяется вертикальная компоновка
  • Выравнивание align не влияет на легенду, но влияет на общую визуальную структуру верхнего блока

Динамическое обновление заголовка

Изменение текста заголовка возможно через обновление объекта конфигурации и вызов метода update():

chart.options.plugins.title.text = 'Новый заголовок';
chart.update();

Массив текста также может быть обновлен динамически:

chart.options.plugins.title.text = ['Линия 1', 'Линия 2'];
chart.update();

Условное отображение заголовка

Параметр display может изменяться в зависимости от состояния данных:

chart.options.plugins.title.display = chart.data.datasets.length > 0;
chart.update();

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

Оглавление