Как убрать метки оси X в Chart.js: настройка опций

Быстрый ответ

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

options: {
  scales: {
    x: {
      display: false // Скрыть подписи оси X
    }
  }
}

Таким образом, ось X вместе с ее метками будет скрыта. Добавьте код выше в конфигурацию вашего графика Chart.js, и подписи оси X исчезнут.

Как работает этот код?

Оставляем ось, но убираем подписи

Если вы хотите оставить ось X видимой, но скрыть только подписи, используйте параметр ticks:

options: {
  scales: {
    x: {
      ticks: {
        display: false // Подписи удалены, ось осталась
      }
    }
  }
}

Подробнее об этом расскажет наш спикер на видео

Меняются версии, меняются настройки

C версии Chart.js v2.1 параметр scaleShowLabels: false стал устаревшим. Для избежания путаницы рекомендуется ознакомиться с последней документацией Chart.js.

С совместимостью могут быть проблемы

Для версий Chart.js до 2.1.4 параметр display: false может работать нестабильно, поэтому проверьте совместимость вашего кода с версией библиотеки, которую вы используете.

Глобальное сокрытие легенды

Если вы хотите скрыть легенду для всех графиков, воспользуйтесь следующей глобальной настройкой:

Chart.defaults.global.legend.display = false; // Иногда легенда не нужна

Заметьте, что данная настройка не влияет на подписи оси X.

Визуализация

Представьте себе, что подписи на оси X — это веселые миньоны (🍌), которые устраивают веселый душ на сцене вашего графика. Пришло время им отдохнуть:

До: [📈🍌]
# График вместе с дружелюбными миньонами — подписями.

Решение режиссера: 🚫🍌
# Миньонам было поручено отойти в сторону.

И Chart.js берет на себя роль режиссера:

options: {
    scales: {
        xAxes: [{
            display: false // Миньонов на графике больше не видно!
        }]
    }
}

После: [📈😶] // Благодаря исключению развязных миньонов — подписей, график становится чище и более понятным.

Подробное рассмотрение особых случаев и настроек

• Изменение в конфигурации от версии к версии: В зависимости от версии Chart.js могут использоваться xAxes или x. В версии 2 используйте 'xAxes', начиная с версии 3 и выше — 'x'.

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

• Традиционное решение в старых версиях: В старых версиях вы можете скомбинировать использование пустого массива labels с scaleShowLabels: false для быстрого скрытия подписей. Такой способ может быть вам по душе, если вы предпочитаете классический подход.

Продвинутые настройки Chart.js

Не только оси

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

Изменения в Chart.js

Следует всегда быть в курсе обновлений Chart.js, поскольку они могут содержать в себе новые функции для управления и настройки ваших графиков.

Возможности без границ

Chart.js предлагает огромное разнообразие коллбэков и плагинов для тонкой настройки функционала ваших графиков.

Полезные материалы

1. Оси | Chart.js — Официальная документация Chart.js поможет вам научиться настраивать оси, скрывать их и многое другое.
2. Canvas API – Веб-API | MDN — Тщательное руководство по Canvas API, который является основой Chart.js.
3. Вводный курс по Chart.js – YouTube — Гид по Chart.js на YouTube, который охватывает основные аспекты работы с Chart.js, включая настройку осей.
4. Анимации в Chart.js – CSS-Tricks — Форум CSS-Tricks на котором обсуждается использование возможностей анимации в Chart.js.
5. JSFiddle – Площадка для тестирования кода — На этом ресурсе вы увидите практические примеры использования Chart.js, включая создание графиков без подписей на оси X.