Заливка области под линией

В библиотеке Nivo заливка области под линией реализуется через компонент ResponsiveLine (пакет @nivo/line). Основная идея заключается в том, что график линии дополняется полигональной областью, которая заполняется цветом между самой линией и базовой линией (baseline). Эта функциональность активируется через свойство enableArea.

Ключевой момент: заливка не является отдельным графиком, а строится на основе уже рассчитанной линии. Это означает, что форма области всегда строго следует за траекторией линии и пересчитывается при любых изменениях данных или масштаба.

Базовая настройка area-заливки

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

import { ResponsiveLine } from '@nivo/line'

const data = [
  {
    id: 'series-1',
    data: [
      { x: 'A', y: 10 },
      { x: 'B', y: 25 },
      { x: 'C', y: 15 },
      { x: 'D', y: 40 },
    ],
  },
]

export default function AreaChart() {
  return (
    <ResponsiveLine
      data={data}
      margin={{ top: 50, right: 50, bottom: 50, left: 60 }}
      xScale={{ type: 'point' }}
      yScale={{ type: 'linear', min: 0, max: 'auto' }}
      axisBottom={{ legend: 'Категории', legendOffset: 36 }}
      axisLeft={{ legend: 'Значения', legendOffset: -40 }}
      enableArea={true}
      areaBaselineValue={0}
    />
  )
}

Основные параметры

  • enableArea — включает отрисовку заливки
  • areaBaselineValue — определяет базовую линию (обычно 0)
  • yScale.min — влияет на то, откуда начинается заполнение

Если enableArea выключен, график превращается в обычную линию без заполнения.

Базовая линия и её влияние

Базовая линия определяет, относительно чего строится заливка. Возможны два основных сценария:

Фиксированная базовая линия

Используется значение 0, что подходит для большинства бизнес-метрик:

areaBaselineValue={0}

В этом случае область всегда заполняется между линией и осью X на уровне нуля.

Автоматическая базовая линия

areaBaselineValue="auto"

Заливка начинается от минимального значения оси Y. Такой подход используется в случаях, когда данные не имеют естественного нуля (например, температура или финансовые отклонения в узком диапазоне).

Управление прозрачностью и визуальной плотностью

Одним из ключевых параметров является areaOpacity, который контролирует насыщенность заливки:

<ResponsiveLine
  data={data}
  enableArea={true}
  areaOpacity={0.25}
/>

Чем выше значение, тем более плотной выглядит заливка. В типичных интерфейсах используются значения от 0.1 до 0.3, чтобы не перекрывать линии и сетку графика.

Цвета и градиенты заливки

Nivo позволяет управлять заливкой через colors и defs, включая линейные и радиальные градиенты.

Простая цветовая заливка

<ResponsiveLine
  data={data}
  enableArea={true}
  colors={{ scheme: 'category10' }}
/>

В этом случае цвет линии и области совпадает.

Градиентная заливка

Для более выразительной визуализации применяется SVG-градиент:

<ResponsiveLine
  data={data}
  enableArea={true}
  defs={[
    {
      id: 'gradientA',
      type: 'linearGradient',
      colors: [
        { offset: 0, color: '#4f46e5' },
        { offset: 100, color: '#4f46e5', opacity: 0 },
      ],
    },
  ]}
  fill={[
    {
      match: '*',
      id: 'gradientA',
    },
  ]}
/>

Особенность подхода заключается в том, что градиент привязывается к области через систему defs + fill, а не напрямую к серии данных.

Работа с несколькими линиями и областями

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

const data = [
  {
    id: 'A',
    data: [
      { x: 1, y: 10 },
      { x: 2, y: 20 },
      { x: 3, y: 15 },
    ],
  },
  {
    id: 'B',
    data: [
      { x: 1, y: 5 },
      { x: 2, y: 15 },
      { x: 3, y: 25 },
    ],
  },
]
<ResponsiveLine
  data={data}
  enableArea={true}
  areaOpacity={0.2}
  useMesh={true}
/>

Важный аспект перекрытия

Если несколько областей пересекаются, порядок отрисовки зависит от порядка серий в массиве data. Последняя серия визуально находится выше.

Сглаживание и форма линии

Заливка области напрямую зависит от формы линии. Параметр curve влияет на геометрию:

<ResponsiveLine
  data={data}
  enableArea={true}
  curve="monotoneX"
/>

Популярные варианты:

  • linear — ломаная линия
  • monotoneX — сглаживание по X без резких изгибов
  • cardinal — более выраженная плавность
  • step — ступенчатая форма

При изменении curve автоматически изменяется и форма заливки, поскольку область строится на основе той же интерполяции.

Контроль границ области

В некоторых случаях требуется ограничить заливку внутри определённого диапазона оси Y. Это достигается через настройку yScale:

<ResponsiveLine
  data={data}
  yScale={{
    type: 'linear',
    min: 0,
    max: 100,
    stacked: false,
  }}
  enableArea={true}
/>

Если max ограничен, область визуально «обрезается» по верхней границе.

Стилизация через theme

Глобальное оформление заливки может быть изменено через theme:

<ResponsiveLine
  data={data}
  enableArea={true}
  theme={{
    area: {
      opacity: 0.15,
    },
    grid: {
      line: {
        stroke: '#e5e7eb',
      },
    },
  }}
/>

Хотя не все версии Nivo поддерживают прямую стилизацию area через theme, чаще используется комбинация areaOpacity + colors.

Поведение при анимации

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

<ResponsiveLine
  data={data}
  enableArea={true}
  animate={true}
  motionConfig="gentle"
/>

Анимация включает:

  • трансформацию координат точек
  • перестроение полигона области
  • плавное изменение прозрачности

Типичные ошибки при работе с area-заливкой

Отсутствие базовой линии

Если не задан areaBaselineValue, поведение может отличаться в зависимости от версии Nivo. Это приводит к визуально «плавающей» заливке.

Перекрытие сетки и текста

Высокая непрозрачность (areaOpacity > 0.5) часто делает подписи и grid-линии плохо читаемыми.

Несогласованность шкалы

При использовании stacked: true в yScale заливка начинает вести себя как накопительная диаграмма, что может быть ошибочно интерпретировано как обычная area-line визуализация.

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

При скачкообразных значениях ступенчатая (step) кривая создаёт резкие прямоугольные области, что может ухудшать восприятие тренда.

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

Заливка области под линией чаще всего используется для:

  • визуализации накопления значений во времени
  • отображения трендов с акцентом на объём
  • сравнений нескольких временных рядов
  • дашбордов мониторинга метрик (нагрузка, трафик, продажи)

Особенно эффективно area-графики работают в интерфейсах, где требуется быстрое считывание общей динамики, а не точечных значений.

Оглавление