Включение и базовая настройка tooltips

Tooltip — всплывающий информационный блок, который появляется при наведении курсора на элемент графика. Внутри tooltip обычно отображаются:

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

Система tooltip в Chart.js полностью настраивается через объект plugins.tooltip.

Подключение Chart.js

Подключение через CDN:

<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>

Разметка:

<canvas id="myChart"></canvas>

Создание графика:

const ctx = document.getElementById('myChart');

new Chart(ctx, {
    type: 'line',

    data: {
        labels: ['Январь', 'Февраль', 'Март', 'Апрель'],
        datasets: [{
            label: 'Продажи',
            data: [120, 190, 300, 250],
            borderColor: 'blue'
        }]
    }
});

По умолчанию tooltip уже включён.

Стандартное поведение tooltip

При наведении на точку отображается:

  • заголовок (title);
  • название набора данных (label);
  • значение (value);
  • цветовой индикатор.

Стандартный tooltip автоматически адаптируется под тип графика:

  • line
  • bar
  • pie
  • doughnut
  • radar
  • scatter

Базовое включение tooltip

Tooltip включается через параметр:

options: {
    plugins: {
        tooltip: {
            enabled: true
        }
    }
}

Полный пример:

new Chart(ctx, {
    type: 'bar',

    data: {
        labels: ['A', 'B', 'C'],
        datasets: [{
            label: 'Доход',
            data: [15, 25, 40],
            backgroundColor: 'orange'
        }]
    },

    options: {
        plugins: {
            tooltip: {
                enabled: true
            }
        }
    }
});

Отключение tooltip

options: {
    plugins: {
        tooltip: {
            enabled: false
        }
    }
}

После отключения всплывающие подсказки больше не отображаются.

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

Параметр Назначение
enabled Включение/отключение
mode Режим наведения
intersect Требование точного попадания
backgroundColor Цвет фона
titleColor Цвет заголовка
bodyColor Цвет текста
borderColor Цвет рамки
borderWidth Толщина рамки
padding Внутренние отступы
cornerRadius Скругление углов
displayColors Цветные маркеры
callbacks Пользовательские функции

Режимы работы tooltip

mode: ‘nearest’

Показывается ближайшая точка.

tooltip: {
    mode: 'nearest'
}

Особенно полезно для линейных графиков.

mode: ‘index’

Показываются значения всех наборов данных по одной оси X.

tooltip: {
    mode: 'index'
}

Пример:

datasets: [
    {
        label: '2024',
        data: [10, 20, 30]
    },
    {
        label: '2025',
        data: [15, 25, 35]
    }
]

При наведении выводятся оба значения.

mode: ‘dataset’

Отображается весь набор данных.

tooltip: {
    mode: 'dataset'
}

mode: ‘point’

Показывается только конкретная точка.

tooltip: {
    mode: 'point'
}

intersect

intersect: true

Tooltip появляется только при точном наведении.

tooltip: {
    intersect: true
}

intersect: false

Tooltip отображается даже рядом с элементом.

tooltip: {
    intersect: false
}

Очень полезно для мобильных устройств.

Настройка внешнего вида

Изменение цвета фона

tooltip: {
    backgroundColor: '#222'
}

Цвет текста

tooltip: {
    titleColor: '#fff',
    bodyColor: '#ddd'
}

Рамка tooltip

tooltip: {
    borderColor: 'red',
    borderWidth: 2
}

Скругление углов

tooltip: {
    cornerRadius: 10
}

Внутренние отступы

tooltip: {
    padding: 15
}

Размер шрифтов

tooltip: {
    titleFont: {
        size: 18
    },

    bodyFont: {
        size: 14
    }
}

Отключение цветных индикаторов

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

tooltip: {
    displayColors: false
}

Callback-функции tooltip

Система callback позволяет полностью переопределить содержимое.

Основной раздел:

tooltip: {
    callbacks: {

    }
}

Изменение заголовка

title()

tooltip: {
    callbacks: {
        title(items) {
            return 'Месяц: ' + items[0].label;
        }
    }
}

Изменение основного текста

label()

tooltip: {
    callbacks: {
        label(context) {
            return 'Продажи: ' + context.raw;
        }
    }
}

Форматирование валюты

tooltip: {
    callbacks: {
        label(context) {
            return '$' + context.raw;
        }
    }
}

Форматирование больших чисел

tooltip: {
    callbacks: {
        label(context) {

            return new Intl.NumberFormat('ru-RU')
                .format(context.raw);
        }
    }
}

Добавление процентов

tooltip: {
    callbacks: {
        label(context) {

            return context.raw + '%';
        }
    }
}

Многострочный tooltip

Можно вернуть массив строк.

tooltip: {
    callbacks: {
        label(context) {

            return [
                'Значение: ' + context.raw,
                'План выполнен',
                'Рост продаж'
            ];
        }
    }
}

Объект context

В callback-функциях используется объект context.

Основные свойства:

Свойство Описание
context.label Подпись
context.raw Исходное значение
context.dataset Набор данных
context.datasetIndex Индекс dataset
context.dataIndex Индекс элемента
context.formattedValue Отформатированное значение

Пример использования context

tooltip: {
    callbacks: {
        label(context) {

            const datasetName = context.dataset.label;
            const value = context.raw;

            return datasetName + ': ' + value;
        }
    }
}

Полная настройка tooltip

new Chart(ctx, {

    type: 'line',

    data: {
        labels: ['Пн', 'Вт', 'Ср', 'Чт'],

        datasets: [{
            label: 'Посетители',
            data: [120, 150, 180, 210],
            borderColor: 'blue'
        }]
    },

    options: {

        plugins: {

            tooltip: {

                enabled: true,

                mode: 'index',

                intersect: false,

                backgroundColor: '#1e1e1e',

                titleColor: '#ffffff',

                bodyColor: '#cccccc',

                borderColor: '#555',

                borderWidth: 1,

                padding: 12,

                cornerRadius: 8,

                displayColors: true,

                callbacks: {

                    title(items) {
                        return 'День: ' + items[0].label;
                    },

                    label(context) {
                        return 'Посетители: ' + context.raw;
                    }
                }
            }
        }
    }
});

Позиционирование tooltip

position: ‘average’

Tooltip располагается по центру группы.

tooltip: {
    position: 'average'
}

position: ‘nearest’

Tooltip размещается рядом с ближайшей точкой.

tooltip: {
    position: 'nearest'
}

Анимация tooltip

Chart.js автоматически анимирует появление tooltip.

Дополнительная настройка:

animation: {
    duration: 300
}

Tooltip в pie и doughnut диаграммах

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

new Chart(ctx, {

    type: 'pie',

    data: {

        labels: ['Chrome', 'Firefox', 'Safari'],

        datasets: [{
            data: [65, 20, 15]
        }]
    },

    options: {

        plugins: {

            tooltip: {

                callbacks: {

                    label(context) {

                        const value = context.raw;

                        return value + '%';
                    }
                }
            }
        }
    }
});

Tooltip в stacked charts

Для stacked-графиков часто требуется отображение общей суммы.

tooltip: {
    callbacks: {

        footer(items) {

            let total = 0;

            items.forEach(item => {
                total += item.raw;
            });

            return 'Итого: ' + total;
        }
    }
}

Footer и afterBody

Tooltip поддерживает дополнительные секции.

footer(items) {
    return 'Всего элементов: ' + items.length;
}

afterBody

afterBody() {
    return 'Дополнительная информация';
}

Полный набор callback-функций

Callback Назначение
beforeTitle Перед заголовком
title Заголовок
afterTitle После заголовка
beforeBody Перед основным текстом
beforeLabel Перед строкой
label Основной текст
afterLabel После строки
afterBody После текста
beforeFooter Перед footer
footer Footer
afterFooter После footer

Кастомизация цветных маркеров

labelColor

tooltip: {
    callbacks: {

        labelColor(context) {

            return {
                borderColor: 'red',
                backgroundColor: 'yellow'
            };
        }
    }
}

Изменение формы маркера

tooltip: {
    usePointStyle: true
}

Теперь вместо квадратов используются стили точек графика.

Внешний tooltip

Chart.js позволяет полностью заменить стандартный tooltip собственным HTML-блоком.

tooltip: {
    enabled: false,
    external: externalTooltipHandler
}

Пример external tooltip

function externalTooltipHandler(context) {

    const tooltip = context.tooltip;

    let tooltipEl = document.getElementById('chart-tooltip');

    if (!tooltipEl) {

        tooltipEl = document.createElement('div');

        tooltipEl.id = 'chart-tooltip';

        document.body.appendChild(tooltipEl);
    }

    if (tooltip.opacity === 0) {

        tooltipEl.style.opacity = 0;

        return;
    }

    tooltipEl.innerHTML = tooltip.body[0].lines[0];

    tooltipEl.style.opacity = 1;

    tooltipEl.style.position = 'absolute';

    tooltipEl.style.left =
        context.chart.canvas.offsetLeft +
        tooltip.caretX + 'px';

    tooltipEl.style.top =
        context.chart.canvas.offsetTop +
        tooltip.caretY + 'px';
}

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

При большом количестве данных callback-функции могут вызываться очень часто.

Рекомендации:

  • избегать тяжёлых вычислений;
  • не создавать сложные DOM-элементы;
  • минимизировать работу в label;
  • не использовать частые запросы к серверу;
  • кэшировать вычисления.

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

Неправильное расположение tooltip

Неверно:

options: {
    tooltip: {

    }
}

Правильно:

options: {
    plugins: {
        tooltip: {

        }
    }
}

Использование устаревшего синтаксиса

В старых версиях:

options: {
    tooltips: {

    }
}

В современных версиях:

options: {
    plugins: {
        tooltip: {

        }
    }
}

Ошибки в callback

Неверно:

label(context) {
    return context.value;
}

Правильно:

label(context) {
    return context.raw;
}

Практический пример: финансовый график

new Chart(ctx, {

    type: 'bar',

    data: {

        labels: ['Q1', 'Q2', 'Q3', 'Q4'],

        datasets: [{
            label: 'Прибыль',
            data: [125000, 182000, 210000, 175000],
            backgroundColor: '#4caf50'
        }]
    },

    options: {

        plugins: {

            tooltip: {

                backgroundColor: '#111',

                titleColor: '#fff',

                bodyColor: '#0f0',

                borderColor: '#0f0',

                borderWidth: 1,

                callbacks: {

                    title(items) {

                        return 'Квартал: ' + items[0].label;
                    },

                    label(context) {

                        const value =
                            new Intl.NumberFormat('ru-RU')
                                .format(context.raw);

                        return 'Прибыль: ' + value + ' ₽';
                    },

                    footer(items) {

                        return 'Финансовый отчёт';
                    }
                }
            }
        }
    }
});
Оглавление