Встроенные плагины: title, legend, tooltip, decimation, filler, colors, subtitle

Встроенный плагин title отвечает за отображение основного заголовка диаграммы. Он управляет текстом, выравниванием, стилем и поведением заголовка внутри канвы.

Основная конфигурация задаётся через plugins.title:

const config = {
  type: 'bar',
  data,
  options: {
    plugins: {
      title: {
        display: true,
        text: 'Продажи по месяцам',
        color: '#333',
        font: {
          size: 18,
          weight: 'bold'
        },
        padding: {
          top: 10,
          bottom: 20
        },
        align: 'center'
      }
    }
  }
};

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

  • display — включает или отключает отображение заголовка
  • text — строка или массив строк (многострочный заголовок)
  • font — настройка шрифта (размер, жирность, семейство)
  • padding — внутренние отступы вокруг текста
  • align — выравнивание: start, center, end

При необходимости заголовок может быть динамическим:

title: {
  display: true,
  text: (ctx) => `Отчёт за ${ctx.chart.data.labels.length} периодов`
}

Legend (легенда)

Плагин legend управляет отображением условных обозначений наборов данных. Он критически важен для многосерийных графиков.

plugins: {
  legend: {
    display: true,
    position: 'top',
    align: 'center'
  }
}

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

  • display — включение/выключение легенды
  • position — расположение: top, bottom, left, right
  • align — выравнивание элементов легенды
  • labels — настройка меток

Пример кастомизации меток:

legend: {
  labels: {
    color: '#444',
    boxWidth: 12,
    padding: 15,
    usePointStyle: true,
    font: {
      size: 12
    }
  }
}

Фильтрация элементов легенды:

legend: {
  onClick: (e, legendItem, legend) => {
    const index = legendItem.datasetIndex;
    const ci = legend.chart;
    ci.data.datasets[index].hidden = !ci.data.datasets[index].hidden;
    ci.update();
  }
}

Tooltip (всплывающие подсказки)

Плагин tooltip отвечает за интерактивные подсказки при наведении на элементы графика. Это один из самых функциональных компонентов Chart.js.

Базовая настройка:

plugins: {
  tooltip: {
    enabled: true,
    mode: 'index',
    intersect: false
  }
}

Основные режимы работы:

  • ‘point’ — только точка под курсором
  • ‘nearest’ — ближайший элемент
  • ‘index’ — все значения по индексу
  • ‘dataset’ — весь набор данных

Кастомизация внешнего вида:

tooltip: {
  backgroundColor: '#222',
  titleColor: '#fff',
  bodyColor: '#ddd',
  padding: 12,
  cornerRadius: 6
}

Форматирование текста:

tooltip: {
  callbacks: {
    label: function(context) {
      return `Значение: ${context.parsed.y}`;
    },
    title: function(context) {
      return `Категория: ${context[0].label}`;
    }
  }
}

Полностью кастомный tooltip:

tooltip: {
  external: function(context) {
    const tooltip = context.tooltip;
    let el = document.getElementById('custom-tooltip');

    if (!el) {
      el = document.createElement('div');
      el.id = 'custom-tooltip';
      document.body.appendChild(el);
    }

    if (tooltip.opacity === 0) {
      el.style.display = 'none';
      return;
    }

    el.innerHTML = tooltip.body.map(b => b.lines).join('<br>');
    el.style.display = 'block';
  }
}

Decimation (оптимизация больших данных)

Плагин decimation используется для уменьшения количества точек на графике при работе с большими наборами данных, сохраняя визуальную форму.

plugins: {
  decimation: {
    enabled: true,
    algorithm: 'lttb',
    samples: 500
  }
}

Основные алгоритмы:

  • lttb (Largest Triangle Three Buckets) — сохраняет форму графика
  • min-max — оставляет минимумы и максимумы
  • lttb-bucket — оптимизированная версия для потоковых данных

Пример включения:

options: {
  parsing: false,
  plugins: {
    decimation: {
      enabled: true,
      algorithm: 'lttb'
    }
  }
}

Особенности:

  • снижает нагрузку на рендеринг
  • полезен при десятках тысяч точек
  • может применяться только к линейным данным

Filler (заливка областей)

Плагин filler отвечает за заполнение пространства между линиями и осями или между наборами данных. Особенно важен для area charts.

datasets: [{
  label: 'Продажи',
  data: [10, 20, 15, 30],
  fill: true,
  backgroundColor: 'rgba(75, 192, 192, 0.2)'
}]

Основные режимы fill:

  • false — без заливки
  • true — заливка до оси X
  • 'origin' — до нуля
  • 'start' / 'end' — до границ шкалы
  • объектная конфигурация — между датасетами

Пример заполнения между двумя линиями:

datasets: [
  {
    label: 'A',
    data: [10, 20, 30],
    fill: '+1'
  },
  {
    label: 'B',
    data: [5, 15, 25],
    fill: false
  }
]

Градиентная заливка:

const ctx = canvas.getContext('2d');
const gradient = ctx.createLinearGradient(0, 0, 0, 400);
gradient.addColorStop(0, 'rgba(75,192,192,0.4)');
gradient.addColorStop(1, 'rgba(75,192,192,0)');

dataset.backgroundColor = gradient;
dataset.fill = true;

Colors (автоматическая цветовая схема)

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

plugins: {
  colors: {
    enabled: true,
    forceOverride: false
  }
}

Поведение:

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

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

datasets: [
  { label: 'A', data: [1, 2, 3] },
  { label: 'B', data: [2, 3, 4] },
  { label: 'C', data: [3, 4, 5] }
]

Chart.js сам распределит цвета.

Принудительное переопределение:

colors: {
  enabled: true,
  forceOverride: true
}

Subtitle (подзаголовок)

Плагин subtitle дополняет основной заголовок дополнительной строкой пояснения.

plugins: {
  subtitle: {
    display: true,
    text: 'Данные за 2024 год',
    color: '#666',
    font: {
      size: 14,
      style: 'italic'
    },
    padding: {
      bottom: 10
    }
  }
}

Особенности:

  • отображается под title
  • поддерживает тот же API форматирования
  • может быть многострочным
  • подходит для уточнений и контекста

Динамический subtitle:

subtitle: {
  text: (ctx) => `Всего точек: ${ctx.chart.data.datasets[0].data.length}`
}

Совместная работа встроенных плагинов

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

options: {
  plugins: {
    title: { display: true, text: 'Аналитика' },
    subtitle: { display: true, text: 'Помесячные данные' },
    legend: { position: 'bottom' },
    tooltip: { enabled: true },
    decimation: { enabled: true, algorithm: 'lttb' },
    colors: { enabled: true },
    filler: { propagate: true }
  }
}

Взаимодействие компонентов происходит на уровне рендера:

  • title/subtitle формируют верхнюю часть графика
  • legend управляет визуальной идентификацией серий
  • tooltip отвечает за интерактивность
  • decimation оптимизирует производительность
  • filler формирует визуальные области
  • colors задаёт базовую палитру при отсутствии явных цветов
Оглавление