Горизонтальная диаграмма (bar с indexAxis)

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

В классическом варианте столбцы располагаются по оси X, а категории — по оси Y. В горизонтальном варианте всё меняется местами: категории переходят на ось X, а значения вытягиваются вдоль оси Y.

Ключевой механизм:

  • indexAxis: 'x' — стандартная вертикальная диаграмма (значение по Y)
  • indexAxis: 'y' — горизонтальная диаграмма (значение по X визуально превращается в длину полосы)

Фактически меняется не тип графика, а направление индексации категорий.

Базовая конфигурация горизонтального bar chart

const config = {
  type: 'bar',
  data: {
    labels: ['Январь', 'Февраль', 'Март', 'Апрель'],
    datasets: [{
      label: 'Продажи',
      data: [120, 190, 300, 250],
      backgroundColor: 'rgba(54, 162, 235, 0.6)'
    }]
  },
  options: {
    indexAxis: 'y'
  }
};

new Chart(document.getElementById('chart'), config);

В этом примере:

  • labels становятся вертикальным списком категорий
  • data задаёт длину горизонтальных полос
  • indexAxis: 'y' разворачивает диаграмму

Логика осей при indexAxis: ‘y’

При включении горизонтальной ориентации происходит переназначение ролей осей:

  • Ось X становится числовой шкалой значений
  • Ось Y становится категориальной шкалой

Это важно учитывать при настройке:

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

Настройка масштаба значений

Горизонтальные диаграммы часто требуют явного контроля шкалы:

options: {
  indexAxis: 'y',
  scales: {
    x: {
      beginAtZero: true,
      ticks: {
        precision: 0
      }
    }
  }
}

Здесь ось x отвечает за числовые значения, поэтому именно её обычно настраивают.

Работа с шириной и толщиной столбцов

Горизонтальные бары могут выглядеть перегружено при большом количестве категорий. Управление плотностью осуществляется через:

  • barThickness
  • maxBarThickness
  • categoryPercentage
  • barPercentage

Пример:

datasets: [{
  data: [80, 120, 60],
  barThickness: 20
}]

Чем меньше толщина, тем больше категорий можно уместить без прокрутки.

Сортировка категорий

Горизонтальная ориентация часто используется для ранжирования. Данные обычно сортируются до передачи в график:

const labels = ['A', 'B', 'C', 'D'];
const values = [40, 90, 20, 70];

// сортировка по убыванию
const sorted = labels
  .map((label, i) => ({ label, value: values[i] }))
  .sort((a, b) => b.value - a.value);

const config = {
  type: 'bar',
  data: {
    labels: sorted.map(i => i.label),
    datasets: [{
      data: sorted.map(i => i.value)
    }]
  },
  options: {
    indexAxis: 'y'
  }
};

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

Стилизация горизонтальных столбцов

График становится более читаемым при правильной настройке визуала:

datasets: [{
  data: [10, 40, 25],
  backgroundColor: [
    'rgba(255, 99, 132, 0.6)',
    'rgba(54, 162, 235, 0.6)',
    'rgba(75, 192, 192, 0.6)'
  ],
  borderColor: 'rgba(0, 0, 0, 0.1)',
  borderWidth: 1,
  borderRadius: 6
}]

Особенно важны:

  • borderRadius для сглаживания концов полос
  • индивидуальные цвета для сравнения категорий
  • прозрачность для визуальной лёгкости

Подписи и подписи значений

Для горизонтальных диаграмм часто включают значения прямо на концах полос:

options: {
  indexAxis: 'y',
  plugins: {
    tooltip: {
      enabled: true
    }
  }
}

Дополнительно часто используется плагин chartjs-plugin-datalabels, позволяющий выводить числа прямо на графике.

Поведение сетки и визуальной структуры

Горизонтальные диаграммы отличаются восприятием сетки:

  • вертикальные линии становятся основными ориентирующими
  • горизонтальные линии часто отключают для чистоты
scales: {
  x: {
    grid: {
      display: true
    }
  },
  y: {
    grid: {
      display: false
    }
  }
}

Такой подход снижает визуальный шум.

Работа с длинными подписями категорий

Горизонтальный формат особенно полезен при длинных названиях:

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

Настройки:

scales: {
  y: {
    ticks: {
      autoSkip: false,
      font: {
        size: 12
      }
    }
  }
}

Анимация горизонтальных bar chart

Анимации в Chart.js сохраняются, но направление их визуально меняется:

options: {
  indexAxis: 'y',
  animation: {
    duration: 800,
    easing: 'easeOutQuart'
  }
}

Полосы «вырастают» слева направо, что соответствует восприятию шкалы.

Группировка и стековые диаграммы

Горизонтальные диаграммы поддерживают stacking:

options: {
  indexAxis: 'y',
  scales: {
    x: {
      stacked: true
    },
    y: {
      stacked: true
    }
  }
}

Это позволяет:

  • сравнивать вклад нескольких наборов данных
  • строить составные показатели
  • визуализировать структуру

Типичные сценарии применения

Горизонтальные bar chart используются там, где важна читаемость категорий и сравнение:

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

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

Оглавление