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

Метод 1: использование параметраtooltip.custom
Один из способов удалить имя ряда из всплывающей подсказки в ApexCharts — использовать параметр tooltip.custom. Эта опция позволяет вам переопределить содержимое всплывающей подсказки по умолчанию и настроить его в соответствии с вашими требованиями. Вот пример:

const options = {
  // other chart options...
  tooltip: {
    custom: function({ series, seriesIndex, dataPointIndex, w }) {
      return '<div class="custom-tooltip">' + w.globals.series[seriesIndex][dataPointIndex] + '</div>';
    }
  }
};

Метод 2. Управление текстом всплывающей подсказки с помощью функции Tooltip.formatter.
Другой подход — использовать функцию tooltip.formatterдля управления текстом всплывающей подсказки. Эта функция получает аргументы series, seriesIndex, dataPointIndexи w, позволяющие настраивать содержимое всплывающей подсказки. Вот пример:

const options = {
  // other chart options...
  tooltip: {
    formatter: function({ series, seriesIndex, dataPointIndex, w }) {
      return '<div class="custom-tooltip">' + w.globals.series[seriesIndex][dataPointIndex] + '</div>';
    }
  }
};

Метод 3. Скрытие названия серии с помощью CSS
Если вы предпочитаете решение на основе CSS, вы можете скрыть название серии с помощью стилей CSS. Этот метод включает в себя выбор элемента названия серии во всплывающей подсказке и его скрытие. Вот пример:

.apexcharts-tooltip-series-group {
  display: none;
}

Метод 4: настройка шаблона всплывающей подсказки
ApexCharts также позволяет настроить шаблон всплывающей подсказки, изменив параметр tooltip.theme. Создав собственный шаблон, вы можете управлять содержимым и макетом всплывающей подсказки, включая название серии. Вот пример:

const options = {
  // other chart options...
  tooltip: {
    theme: 'custom',
    custom: function({ series, seriesIndex, dataPointIndex, w }) {
      return '<div class="custom-tooltip">' + w.globals.series[seriesIndex][dataPointIndex] + '</div>';
    }
  }
};

Метод 5: использование параметраtooltip.enabled.
Наконец, если вы хотите полностью удалить всплывающую подсказку с диаграммы, вы можете установить для параметра tooltip.enabledзначение false. Этот метод полностью отключает функциональность всплывающей подсказки. Вот пример:

const options = {
  // other chart options...
  tooltip: {
    enabled: false
  }
};

В этой статье мы рассмотрели пять различных способов удаления названия серии из всплывающих подсказок в ApexCharts. Независимо от того, предпочитаете ли вы решения на основе JavaScript, модификации CSS или настройку шаблона всплывающей подсказки, ApexCharts предоставляет различные варианты для достижения желаемого результата. Реализуя эти методы, вы можете улучшить визуальное представление и удобство использования ApexCharts.