Розробка інтерактивних графіків на Nivo для React-застосунку

Розробка інтерактивних графіків на Nivo для React-додатків

Nivo — бібліотека React-компонентів на базі D3 з красивими стилями за замовчуванням та підтримкою SVG та Canvas. Зручна тим, що кожен тип графіка — окремий пакет, не потрібно завантажувати всю бібліотеку.

Встановлення (тільки потрібні компоненти)

npm install @nivo/line @nivo/bar @nivo/pie @nivo/heatmap @nivo/core

Line Chart

import { ResponsiveLine } from '@nivo/line';

function NivoLineChart({ data }) {
  const nivoData = [
    {
      id: 'Дохід',
      color: '#3b82f6',
      data: data.map(d => ({ x: d.date, y: d.revenue }))
    },
    {
      id: 'Ціль',
      color: '#f59e0b',
      data: data.map(d => ({ x: d.date, y: d.target }))
    }
  ];

  return (
    <div style={{ height: 350 }}>
      <ResponsiveLine
        data={nivoData}
        margin={{ top: 20, right: 120, bottom: 50, left: 70 }}
        xScale={{ type: 'time', format: '%Y-%m-%d', precision: 'day' }}
        xFormat="time:%d.%m.%Y"
        yScale={{ type: 'linear', stacked: false }}
        yFormat=" >-.0f"
        curve="monotoneX"
        axisLeft={{
          format: v => `${(v / 1000).toFixed(0)}k`,
          legend: 'Дохід (₽)',
          legendOffset: -60,
          legendPosition: 'middle'
        }}
        axisBottom={{
          format: '%d %b',
          tickValues: 'every 2 weeks'
        }}
        colors={{ scheme: 'paired' }}
        lineWidth={2}
        pointSize={4}
        enableArea
        areaOpacity={0.1}
        useMesh
        legends={[{
          anchor: 'bottom-right',
          direction: 'column',
          itemWidth: 100,
          itemHeight: 20
        }]}
        tooltip={({ point }) => (
          <div className="chart-tooltip">
            <strong>{point.data.xFormatted}</strong>
            <br />
            {point.serieId}: {Number(point.data.y).toLocaleString('uk')} ₽
          </div>
        )}
      />
    </div>
  );
}

Bar Chart із користувацькими кольорами за значенням

import { ResponsiveBar } from '@nivo/bar';

function ConversionBarChart({ data }) {
  return (
    <div style={{ height: 300 }}>
      <ResponsiveBar
        data={data}
        keys={['conversion']}
        indexBy="page"
        margin={{ top: 10, right: 20, bottom: 60, left: 60 }}
        padding={0.4}
        valueScale={{ type: 'linear' }}
        colors={({ data }) => {
          if (data.conversion >= 5) return '#22c55e';
          if (data.conversion >= 2) return '#f59e0b';
          return '#ef4444';
        }}
        axisBottom={{ tickRotation: -45 }}
        axisLeft={{ format: v => `${v}%` }}
        label={d => `${d.value}%`}
        tooltip={({ data, value }) => (
          <div className="chart-tooltip">
            <strong>{data.page}</strong>: {value}% конверсія
          </div>
        )}
      />
    </div>
  );
}

Calendar Heatmap

import { ResponsiveCalendar } from '@nivo/calendar';

function ActivityCalendar({ data }) {
  return (
    <div style={{ height: 200 }}>
      <ResponsiveCalendar
        data={data}
        from="2026-01-01"
        to="2026-12-31"
        emptyColor="#f3f4f6"
        colors={['#dbeafe', '#93c5fd', '#3b82f6', '#1d4ed8']}
        margin={{ top: 20, right: 20, bottom: 20, left: 20 }}
        yearSpacing={40}
        monthBorderColor="#ffffff"
        dayBorderWidth={2}
        dayBorderColor="#ffffff"
        tooltip={({ day, value }) => (
          <div className="chart-tooltip">{day}: {value} подій</div>
        )}
      />
    </div>
  );
}

Часові межи

4–5 типів Nivo графіків із користувацькими підказками — 3–4 дні.