Пунктирные и кастомные линии через borderDash

В библиотеке Chart.js пунктирные и штриховые линии задаются через свойство borderDash, которое определяет шаблон штриховки линии. Это свойство применяется как к линиям графиков (datasets), так и к элементам сетки (grid), позволяя гибко управлять визуальным стилем диаграмм.

Синтаксис borderDash

Параметр borderDash представляет собой массив чисел:

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

Простейшая форма:

borderDash: [5, 5]

Это означает: 5 пикселей линия, 5 пикселей пропуск, повторение цикла.

Пунктирная линия графика (dataset)

Для линейных графиков borderDash задаётся внутри объекта dataset:

const config = {
  type: 'line',
  data: {
    labels: ['Янв', 'Фев', 'Мар', 'Апр'],
    datasets: [{
      label: 'Продажи',
      data: [10, 20, 15, 30],
      borderColor: 'blue',
      borderWidth: 2,
      borderDash: [8, 4]
    }]
  }
};

В результате линия графика становится штриховой с равномерным чередованием 8px линии и 4px пробела.

Кастомные паттерны штриховки

borderDash не ограничивается простыми парами значений. Можно задавать сложные паттерны:

borderDash: [10, 5, 2, 5]

Такой шаблон интерпретируется как:

  • 10px линия
  • 5px пропуск
  • 2px линия
  • 5px пропуск
  • затем цикл повторяется

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

Смещение штриховки: borderDashOffset

Свойство borderDashOffset управляет сдвигом шаблона штриховки вдоль линии:

borderDashOffset: 4

Используется для:

  • создания эффекта движения линии
  • синхронизации нескольких линий с разными фазами
  • визуального выделения активных данных

При анимации значение может изменяться, создавая иллюзию «бегущего пунктира».

Пунктирная сетка и оси

Штриховка применяется не только к графикам, но и к сетке через grid:

options: {
  scales: {
    x: {
      grid: {
        borderDash: [3, 3]
      }
    },
    y: {
      grid: {
        borderDash: [6, 2]
      }
    }
  }
}

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

Настройка границ и вспомогательных линий

Помимо основной сетки, borderDash применяется к:

  • линиям осей (axis borders)
  • вспомогательным направляющим
  • кастомным линиям через плагин annotations

Пример:

grid: {
  borderDash: [1, 4],
  borderColor: '#ccc'
}

Скриптовая настройка (динамические значения)

Chart.js позволяет задавать borderDash как функцию, зависящую от контекста:

borderDash: (context) => {
  return context.datasetIndex === 0 ? [5, 5] : [2, 2];
}

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

  • различения нескольких наборов данных
  • адаптивного изменения стиля
  • реакций на состояние (hover, active, selected)

Разные стили в одном графике

Комбинация нескольких dataset с разными шаблонами:

datasets: [
  {
    label: 'План',
    data: [30, 40, 35],
    borderDash: [10, 4],
    borderColor: 'green'
  },
  {
    label: 'Факт',
    data: [25, 38, 33],
    borderDash: [2, 2],
    borderColor: 'red'
  }
]

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

Анимация штриховки

Комбинирование borderDashOffset с анимацией Chart.js:

options: {
  animation: {
    duration: 0
  },
  elements: {
    line: {
      borderDashOffset: 0
    }
  }
}

Далее значение offset можно изменять вручную через requestAnimationFrame, создавая эффект «движущейся линии».

Практика построения сложных паттернов

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

  • разные borderDash для сравнения серий
  • изменение толщины borderWidth
  • синхронный borderDashOffset
  • комбинирование с прозрачностью borderColor

Пример визуальной стратегии:

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

Поведение в разных типах графиков

borderDash работает в различных типах визуализаций:

  • line chart — основное применение
  • radar chart — линии лучей и соединений
  • scatter с линиями — соединительные сегменты

В bar charts применяется косвенно через границы (border), а не саму заливку.

Совместимость с другими параметрами стиля

borderDash часто используется вместе с:

  • borderCapStyle (round, butt, square)
  • borderJoinStyle (miter, bevel, round)
  • tension (кривизна линий)
  • stepped (ступенчатая интерполяция)

Комбинация этих параметров формирует итоговый визуальный язык графика.

Типичные ошибки при использовании

Неправильная конфигурация часто приводит к неожиданным результатам:

  • слишком короткие сегменты → «шумная» линия
  • несбалансированные паттерны → визуальная перегрузка
  • отсутствие borderWidth → штриховка плохо читается
  • одинаковые паттерны у всех dataset → потеря различимости

Корректная настройка требует согласованности между масштабом данных и длиной штрихов.

Оглавление