Цвета фона и границ

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

В конфигурации Chart.js цвета задаются в формате CSS. Поддерживаются:

  • HEX (#ff6384)
  • RGB / RGBA (rgb(255, 99, 132), rgba(255, 99, 132, 0.5))
  • HSL / HSLA (hsl(340, 82%, 60%))
  • именованные цвета (red, blue)

Наиболее важное свойство — возможность задавать массивы цветов, где каждый элемент соответствует отдельной точке данных.

const data = {
  labels: ['Январь', 'Февраль', 'Март'],
  datasets: [{
    label: 'Продажи',
    data: [10, 20, 15],
    backgroundColor: ['#ff6384', '#36a2eb', '#ffcd56']
  }]
};

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

Фон элементов графика

Свойство backgroundColor является основным инструментом управления заливкой.

Линейные графики

В линейных графиках фон может применяться к области под линией:

const config = {
  type: 'line',
  data: {
    labels: ['A', 'B', 'C'],
    datasets: [{
      label: 'Температура',
      data: [12, 19, 3],
      fill: true,
      backgroundColor: 'rgba(54, 162, 235, 0.2)',
      borderColor: 'rgba(54, 162, 235, 1)'
    }]
  }
};

Параметр fill: true активирует заливку под линией, а backgroundColor задаёт её визуальную плотность.

Столбчатые графики

Для bar-chart фон определяет цвет каждого столбца:

datasets: [{
  label: 'Доход',
  data: [30, 50, 40],
  backgroundColor: '#4bc0c0'
}]

Если передан массив, каждый столбец получает индивидуальный цвет.

Круговые диаграммы

В pie и doughnut диаграммах фон сегментов является ключевым визуальным элементом:

datasets: [{
  data: [30, 20, 50],
  backgroundColor: ['#ff6384', '#36a2eb', '#ffcd56']
}]

Здесь цвет напрямую определяет восприятие долей.

Цвет границ

Свойство borderColor отвечает за обводку элементов. Оно используется для:

  • выделения столбцов
  • контуров сегментов
  • линий графиков
datasets: [{
  data: [10, 20, 30],
  backgroundColor: '#36a2eb',
  borderColor: '#1e88e5',
  borderWidth: 2
}]

borderWidth управляет толщиной границы и часто используется для повышения контраста.

Разделение фона и границы

Комбинация backgroundColor и borderColor позволяет создавать визуальную глубину:

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

В плотных визуализациях часто используется контрастный тёмный border при светлом фоне.

Скриптовые цвета (scriptable options)

Одной из ключевых возможностей является динамическое вычисление цвета через функцию.

backgroundColor: (context) => {
  const value = context.raw;
  return value > 50 ? 'rgba(75, 192, 192, 0.7)' : 'rgba(255, 99, 132, 0.7)';
}

Контекст содержит:

  • context.dataIndex
  • context.dataset
  • context.raw
  • context.chart

Это позволяет строить адаптивную визуализацию, где цвет зависит от значения данных.

Цвета и состояния взаимодействия

Chart.js поддерживает отдельные свойства для hover-состояний:

  • hoverBackgroundColor
  • hoverBorderColor
  • hoverBorderWidth
datasets: [{
  data: [10, 20, 30],
  backgroundColor: '#36a2eb',
  hoverBackgroundColor: '#1e88e5',
  hoverBorderColor: '#0d47a1',
  hoverBorderWidth: 3
}]

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

Прозрачность и альфа-канал

Использование RGBA позволяет управлять прозрачностью слоёв:

backgroundColor: 'rgba(255, 99, 132, 0.3)'

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

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

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

Градиенты как фон

Chart.js поддерживает Canvas-градиенты через контекст отрисовки:

const ctx = document.getElementById('chart').getContext('2d');

const gradient = ctx.createLinearGradient(0, 0, 0, 400);
gradient.addColorStop(0, 'rgba(54, 162, 235, 0.6)');
gradient.addColorStop(1, 'rgba(54, 162, 235, 0)');

const config = {
  type: 'line',
  data: {
    datasets: [{
      data: [10, 20, 15, 30],
      backgroundColor: gradient,
      fill: true,
      borderColor: 'rgba(54, 162, 235, 1)'
    }]
  }
};

Градиент часто применяется для:

  • имитации объёма
  • мягкого затухания заливки
  • акцентирования верхней части графика

Цвета точек (point styling)

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

  • pointBackgroundColor
  • pointBorderColor
  • pointRadius
datasets: [{
  data: [5, 10, 15],
  pointBackgroundColor: '#ff6384',
  pointBorderColor: '#fff',
  pointRadius: 5
}]

Точки являются самостоятельными визуальными элементами, поэтому их цветовая логика может отличаться от линии.

Глобальные настройки цветов

В конфигурации options можно задать значения по умолчанию:

options: {
  elements: {
    line: {
      borderColor: '#36a2eb'
    },
    point: {
      backgroundColor: '#ff6384'
    }
  }
}

Это позволяет унифицировать стиль всех графиков в приложении без дублирования параметров.

Приоритеты применения цветов

Система наследования в Chart.js работает по следующей логике:

  1. Inline значения в dataset
  2. Scriptable functions
  3. Global defaults
  4. Встроенные значения библиотеки

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

Цветовые массивы и соответствие данных

При использовании массивов цветов действует правило соответствия индексов:

backgroundColor: ['red', 'green', 'blue']

Каждый цвет привязан к data[i]. Если элементов больше, чем цветов, происходит циклическое повторение или использование fallback-значений.

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

Цвета в Chart.js используются не только для декорации, но и для структурирования данных:

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

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

Оглавление