Цвета, шрифты и отступы в tooltips

Tooltip в Chart.js настраиваются через конфигурацию options.plugins.tooltip, где задаются визуальные параметры отображения всплывающих подсказок. Цветовая схема влияет на читаемость, акценты и общее восприятие графика, особенно при плотной визуализации данных.

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

Цвета в tooltip разделяются на несколько логических областей: фон, текст, рамки и цветовые маркеры серий данных.

Фон tooltip

Ключевой параметр:

  • backgroundColor — задаёт цвет фона всего всплывающего окна

Пример логики использования:

  • тёмный фон для светлых графиков
  • светлый фон для тёмных графиков
  • полупрозрачные оттенки для интеграции с графиком

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

Цвет текста

Для текста используются отдельные настройки:

  • titleColor — цвет заголовка tooltip
  • bodyColor — цвет основного текста (значения)
  • footerColor — цвет дополнительной информации

Разделение позволяет задавать иерархию информации, где заголовок визуально выделяется, а тело остаётся нейтральным.

Пример логики:

  • заголовок ярче
  • тело нейтральное
  • футер приглушённый

Цвет рамки

  • borderColor — цвет границы tooltip
  • borderWidth — толщина границы

Рамка используется для отделения tooltip от фона графика, особенно при близких по тону цветах.

Шрифты в tooltip

Шрифты управляются через объект font внутри отдельных секций: titleFont, bodyFont, footerFont.

Общая структура font

Каждый блок поддерживает одинаковую структуру:

  • family — семейство шрифта
  • size — размер шрифта
  • style — начертание (normal, bold, italic)
  • weight — насыщенность
  • lineHeight — высота строки

Заголовок tooltip

titleFont: {
  family: 'Arial',
  size: 14,
  weight: 'bold',
  lineHeight: 1.2
}

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

Основной текст

bodyFont: {
  family: 'Arial',
  size: 12,
  weight: 'normal',
  lineHeight: 1.4
}

Основной текст содержит значения данных и подписи серий.

Футер

footerFont: {
  family: 'Arial',
  size: 11,
  style: 'italic',
  weight: 'normal',
  lineHeight: 1.2
}

Футер применяется для дополнительной информации: суммарных значений, комментариев или вычисленных показателей.

Отступы и внутреннее пространство

Грамотная работа с отступами влияет на читаемость tooltip и предотвращает визуальную перегруженность.

Основной padding

  • padding — внутренние отступы tooltip со всех сторон

Может задаваться:

  • числом (единое значение)
  • объектом (разные стороны)

Пример:

padding: {
  top: 10,
  right: 12,
  bottom: 10,
  left: 12
}

Большие отступы делают tooltip более «воздушным», но увеличивают его размер на экране.

Отступ между цветовым маркером и текстом

  • boxPadding — расстояние между цветным квадратом (или кружком) и текстом значения

Этот параметр особенно важен при использовании displayColors: true.

Цветовые индикаторы серий данных

Chart.js позволяет отображать цвет каждого dataset внутри tooltip.

Включение цветных маркеров

  • displayColors: true | false

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

Стиль маркера

Дополнительные параметры:

  • usePointStyle — использование формы точки вместо квадрата
  • boxWidth — ширина маркера
  • boxHeight — высота маркера

Пример поведения:

  • квадрат — стандарт для bar/line charts
  • круг — часто используется для line charts с точками

Скругления и геометрия tooltip

Визуальная форма tooltip задаётся параметром:

  • cornerRadius — радиус скругления углов

Значение влияет на стиль интерфейса:

  • 0 — строгие прямоугольные формы
  • 6–8 — мягкий современный интерфейс
  • 12+ — выраженно «пузырьковый» стиль

Дополнительно влияет:

  • caretSize — размер стрелки, указывающей на точку данных
  • caretPadding — расстояние стрелки от точки графика

Взаимодействие цветов и прозрачности

Часто используется прозрачность для интеграции tooltip с графиком:

backgroundColor: 'rgba(0, 0, 0, 0.7)'

Прозрачность позволяет:

  • не перекрывать важные данные
  • сохранять контекст графика
  • улучшать визуальную иерархию

Для светлых интерфейсов:

backgroundColor: 'rgba(255, 255, 255, 0.9)'
borderColor: 'rgba(0, 0, 0, 0.1)'

Полная конфигурация tooltip

Пример объединённой настройки цветов, шрифтов и отступов:

options: {
  plugins: {
    tooltip: {
      backgroundColor: 'rgba(20, 20, 20, 0.85)',
      titleColor: '#ffffff',
      bodyColor: '#e0e0e0',
      footerColor: '#b0b0b0',

      borderColor: 'rgba(255, 255, 255, 0.1)',
      borderWidth: 1,

      padding: {
        top: 10,
        right: 14,
        bottom: 10,
        left: 14
      },

      displayColors: true,
      boxPadding: 4,

      titleFont: {
        family: 'Inter',
        size: 14,
        weight: 'bold'
      },

      bodyFont: {
        family: 'Inter',
        size: 12
      },

      footerFont: {
        family: 'Inter',
        size: 11,
        style: 'italic'
      },

      cornerRadius: 6,
      caretSize: 6,
      caretPadding: 8
    }
  }
}

Цветовая логика в сложных графиках

В многосерийных графиках tooltip становится ключевым элементом различения данных. Цветовая система должна соответствовать цветам datasets:

  • одинаковые цвета между графиком и tooltip обязательны
  • контраст текста должен оставаться стабильным при смене темы
  • не рекомендуется использовать более 2–3 уровней яркости в одном tooltip

При динамической смене темы (light/dark) значения backgroundColor, bodyColor и borderColor часто переопределяются через функцию:

backgroundColor: function(context) {
  return context.tooltip.dataPoints[0].dataset.backgroundColor;
}

Кастомизация через callbacks

Для более сложных сценариев используются callback-функции:

  • labelColor — управление цветом маркера
  • labelTextColor — цвет текста конкретной строки

Пример:

callbacks: {
  labelColor: function(context) {
    return {
      borderColor: context.dataset.borderColor,
      backgroundColor: context.dataset.backgroundColor
    };
  }
}

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

Оглавление