Режимы позиционирования: index, dataset, point, nearest

Система взаимодействия в Chart.js определяет, какие элементы графика считаются «активными» при наведении курсора, касании или клике. От выбранного режима зависит:

  • какие точки будут подсвечены;
  • какие данные попадут во всплывающую подсказку (tooltip);
  • как ведёт себя перекрестие;
  • насколько удобно анализировать график.

Основные режимы задаются через параметр mode в секциях:

options: {
    interaction: {
        mode: 'nearest'
    }
}

или отдельно для подсказок:

options: {
    plugins: {
        tooltip: {
            mode: 'index'
        }
    }
}

Наиболее используемые режимы:

  • index
  • dataset
  • point
  • nearest

Общая схема работы interaction.mode

При движении курсора Chart.js:

  1. вычисляет координаты указателя;
  2. ищет подходящие элементы;
  3. определяет активные точки;
  4. отображает tooltip и эффекты hover.

Например:

interaction: {
    mode: 'index',
    intersect: false
}

Здесь:

  • mode определяет стратегию поиска элементов;
  • intersect указывает, требуется ли точное попадание курсором в точку.

Режим index

Принцип работы

Режим index активирует все элементы с одинаковым индексом по оси данных.

Если на графике несколько наборов (datasets), то при наведении на конкретную категорию будут выделены значения всех наборов данных для этой позиции.

Пример

const config = {
    type: 'line',
    data: {
        labels: ['Январь', 'Февраль', 'Март', 'Апрель'],
        datasets: [
            {
                label: 'Продажи',
                data: [10, 20, 15, 30],
                borderColor: 'blue'
            },
            {
                label: 'Расходы',
                data: [8, 12, 18, 25],
                borderColor: 'red'
            }
        ]
    },
    options: {
        interaction: {
            mode: 'index',
            intersect: false
        }
    }
};

Что происходит при наведении

При наведении на область Март:

Dataset Значение
Продажи 15
Расходы 18

Tooltip покажет обе строки одновременно.

Особенности режима index

Подходит для сравнения серий

Главное преимущество — удобное сопоставление нескольких наборов данных по одной категории.

Особенно полезно для:

  • финансовой аналитики;
  • статистики;
  • сравнительных графиков;
  • временных рядов.

Работает даже без точного попадания

Обычно используется:

intersect: false

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

Поведение на line chart

На линейных графиках режим выглядит наиболее естественно:

interaction: {
    mode: 'index',
    axis: 'x'
}

Chart.js ищет совпадение по оси X.

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

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

В этом случае hover и tooltip могут работать независимо.

Визуальное поведение

При наведении:

  • выделяются все точки текущего индекса;
  • tooltip показывает список значений;
  • вертикальная область становится активной.

Применение в stacked charts

В stacked-графиках index особенно полезен:

scales: {
    x: {
        stacked: true
    },
    y: {
        stacked: true
    }
}

Tooltip показывает полный состав стека.

Режим dataset

Принцип работы

Режим dataset активирует весь набор данных целиком.

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

  • выделяется весь dataset;
  • tooltip может отображать все элементы серии.

Пример

interaction: {
    mode: 'dataset'
}

Демонстрация

Допустим, имеется два графика:

  • Продажи
  • Расходы

При наведении на линию Продажи:

  • активируется вся синяя линия;
  • все точки набора считаются связанными;
  • tooltip относится ко всему dataset.

Поведение hover

Chart.js рассматривает dataset как единую сущность.

Это особенно заметно при:

  • изменении толщины линии;
  • изменении прозрачности;
  • подсветке фона.

Настройка выделения

elements: {
    line: {
        borderWidth: 2
    }
},
hover: {
    mode: 'dataset'
}

Практическое применение

Режим полезен при анализе:

  • отдельных трендов;
  • поведения одной метрики;
  • корреляций;
  • общей формы графика.

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

dataset хорошо сочетается с radar chart:

type: 'radar'

При наведении подсвечивается вся фигура.

Отличие от index

index

Активирует:

  • все datasets;
  • один индекс.

dataset

Активирует:

  • один dataset;
  • все индексы.

Tooltip в режиме dataset

plugins: {
    tooltip: {
        mode: 'dataset'
    }
}

Tooltip становится ориентированным на серию данных.

Режим point

Принцип работы

Режим point активирует только конкретную точку, над которой находится курсор.

Никакие соседние элементы не учитываются.

Пример

interaction: {
    mode: 'point'
}

Поведение

Активным становится исключительно элемент под курсором.

Если курсор находится между точками:

  • tooltip не показывается;
  • hover не активируется.

Точность взаимодействия

point требует пересечения с элементом:

interaction: {
    mode: 'point',
    intersect: true
}

Где используется

Режим полезен:

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

Scatter chart и point

Для точечных диаграмм режим считается одним из основных.

type: 'scatter'

Каждая точка анализируется независимо.

Поведение tooltip

Tooltip содержит информацию только об одной точке:

plugins: {
    tooltip: {
        mode: 'point'
    }
}

Преимущества

Максимальная точность

Исключаются случайные совпадения.

Простая логика

Нет группировки данных.

Высокая предсказуемость

Пользователь всегда понимает, какая точка активна.

Недостатки

Требует точного наведения

На маленьких элементах взаимодействие может быть неудобным.

Не подходит для сравнения серий

Показывается только один элемент.

Режим nearest

Принцип работы

nearest ищет ближайший элемент к курсору независимо от индекса и dataset.

Это наиболее гибкий и часто используемый режим.

Пример

interaction: {
    mode: 'nearest'
}

Алгоритм работы

Chart.js:

  1. получает координаты курсора;
  2. вычисляет расстояние до элементов;
  3. выбирает ближайший.

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

Не зависит от индекса

Может быть выбрана любая ближайшая точка.

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

Особенно полезен при:

  • неравномерных данных;
  • scatter chart;
  • bubble chart;
  • смешанных графиках.

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

intersect: true

interaction: {
    mode: 'nearest',
    intersect: true
}

Требуется точное попадание.

intersect: false

interaction: {
    mode: 'nearest',
    intersect: false
}

Chart.js выбирает ближайший элемент даже без пересечения.

Влияние axis

Параметр axis ограничивает поиск.

Поиск только по X

interaction: {
    mode: 'nearest',
    axis: 'x'
}

Поиск только по Y

interaction: {
    mode: 'nearest',
    axis: 'y'
}

Полноценный двумерный поиск

interaction: {
    mode: 'nearest',
    axis: 'xy'
}

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

type: 'bubble'

Поскольку элементы расположены хаотично, nearest обеспечивает наиболее естественное взаимодействие.

Сравнение режимов

Режим Что активируется
index Все datasets одного индекса
dataset Один dataset полностью
point Одна точка
nearest Ближайший элемент

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

Режим Tooltip
index Список значений
dataset Серия данных
point Одна запись
nearest Ближайшая запись

Сравнение по удобству

Режим Удобство
index Отлично для сравнения
dataset Хорошо для анализа тренда
point Хорошо для точности
nearest Универсальный вариант

Связь interaction и hover

Chart.js позволяет задавать разные режимы:

options: {
    interaction: {
        mode: 'nearest'
    },
    hover: {
        mode: 'dataset'
    }
}

Разделение логики

interaction

Управляет:

  • tooltip;
  • событиями;
  • активными элементами.

hover

Управляет:

  • визуальным выделением.

Комбинации mode и intersect

index + false

interaction: {
    mode: 'index',
    intersect: false
}

Классическая конфигурация для аналитических графиков.

nearest + true

interaction: {
    mode: 'nearest',
    intersect: true
}

Точное взаимодействие с ближайшей точкой.

point + true

interaction: {
    mode: 'point',
    intersect: true
}

Максимально строгая активация.

dataset + false

interaction: {
    mode: 'dataset',
    intersect: false
}

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

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

Режим можно задавать отдельно:

plugins: {
    tooltip: {
        mode: 'index'
    }
}

Независимые настройки

interaction: {
    mode: 'nearest'
},
plugins: {
    tooltip: {
        mode: 'index'
    }
}

В таком случае:

  • hover использует nearest;
  • tooltip показывает данные index.

Режимы и типы графиков

Line chart

Наиболее популярны:

  • index
  • nearest

Bar chart

Чаще используется:

  • index

Scatter chart

Наиболее подходит:

  • point
  • nearest

Radar chart

Удобен:

  • dataset

Bubble chart

Практически всегда:

  • nearest

Влияние на производительность

На небольших графиках разница незаметна, однако при тысячах точек режимы работают по-разному.

Наиболее быстрые

  • point
  • nearest

Более затратные

  • index
  • dataset

Поскольку требуется обработка групп элементов.

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

Использование point без intersect

mode: 'point',
intersect: false

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

Неподходящий режим для scatter

mode: 'index'

Для scatter chart это редко удобно.

Слишком агрессивный nearest

На плотных графиках ближайшая точка может постоянно меняться.

Практические рекомендации

Для аналитических панелей

mode: 'index',
intersect: false

Для точечных диаграмм

mode: 'nearest'

или

mode: 'point'

Для анализа трендов

mode: 'dataset'

Для универсального поведения

mode: 'nearest',
intersect: false

Полный пример конфигурации

const config = {
    type: 'line',

    data: {
        labels: ['Янв', 'Фев', 'Мар', 'Апр'],
        datasets: [
            {
                label: 'Доход',
                data: [10, 20, 30, 40],
                borderColor: 'blue'
            },
            {
                label: 'Расход',
                data: [8, 18, 22, 35],
                borderColor: 'red'
            }
        ]
    },

    options: {
        interaction: {
            mode: 'index',
            intersect: false,
            axis: 'x'
        },

        hover: {
            mode: 'dataset'
        },

        plugins: {
            tooltip: {
                mode: 'index'
            }
        }
    }
};
Оглавление