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

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

Highcharts — комерційна бібліотека (безплатно для некомерційних проектів) з багатою функціональністю: 40+ типів графіків, експорт, Stock charts, Maps. Відрізняється стабільністю та обширною документацією.

Встановлення

npm install highcharts highcharts-react-official

Базовий Line Chart

import Highcharts from 'highcharts';
import HighchartsReact from 'highcharts-react-official';
import { useRef } from 'react';

function SalesChart({ data }) {
  const chartRef = useRef<HighchartsReact.RefObject>(null);

  const options: Highcharts.Options = {
    chart: {
      type: 'areaspline',
      height: 300,
      animation: { duration: 500 }
    },
    title: { text: undefined },
    xAxis: {
      type: 'datetime',
      labels: {
        format: '{value:%d %b}'
      }
    },
    yAxis: {
      title: { text: null },
      labels: {
        formatter() {
          return `${(this.value as number / 1000).toFixed(0)}k ₽`;
        }
      }
    },
    tooltip: {
      shared: true,
      xDateFormat: '%d.%m.%Y',
      valuePrefix: '₽ ',
      valueDecimals: 0
    },
    plotOptions: {
      areaspline: {
        fillOpacity: 0.15,
        marker: { enabled: false }
      }
    },
    series: [
      {
        type: 'areaspline',
        name: 'Дохід',
        color: '#3b82f6',
        data: data.map(d => [new Date(d.date).getTime(), d.revenue])
      }
    ],
    credits: { enabled: false }
  };

  return <HighchartsReact highcharts={Highcharts} options={options} ref={chartRef} />;
}

Highcharts Stock (для фінансових даних)

import HighchartsStock from 'highcharts/modules/stock';
import HighchartsReact from 'highcharts-react-official';

HighchartsStock(Highcharts);

function StockChart({ ohlcData, volumeData }) {
  const options: Highcharts.Options = {
    rangeSelector: {
      selected: 1,
      buttons: [
        { type: 'day', count: 1, text: '1д' },
        { type: 'week', count: 1, text: '1т' },
        { type: 'month', count: 1, text: '1м' },
        { type: 'year', count: 1, text: '1р' },
        { type: 'all', text: 'Все' }
      ]
    },
    yAxis: [
      {
        labels: { align: 'right', x: -3 },
        title: { text: 'OHLC' },
        height: '60%',
        lineWidth: 2
      },
      {
        labels: { align: 'right', x: -3 },
        title: { text: 'Обсяг' },
        top: '65%',
        height: '35%',
        lineWidth: 2
      }
    ],
    series: [
      {
        type: 'candlestick',
        name: 'Ціна',
        data: ohlcData,
        upColor: '#22c55e',
        color: '#ef4444'
      },
      {
        type: 'column',
        name: 'Обсяг',
        data: volumeData,
        yAxis: 1,
        color: '#93c5fd'
      }
    ]
  };

  return <HighchartsReact highcharts={Highcharts} constructorType="stockChart" options={options} />;
}

Drilldown

const options: Highcharts.Options = {
  chart: { type: 'column' },
  series: [{
    type: 'column',
    name: 'Категорії',
    data: [
      { name: 'Електроніка', y: 543000, drilldown: 'electronics' },
      { name: 'Одяг', y: 321000, drilldown: 'clothes' }
    ]
  }],
  drilldown: {
    series: [
      {
        id: 'electronics',
        data: [
          ['Смартфони', 230000],
          ['Ноутбуки', 180000],
          ['Аксесуари', 133000]
        ]
      }
    ]
  }
};

Експорт у PNG/PDF/SVG

import 'highcharts/modules/exporting';
import 'highcharts/modules/export-data';
import 'highcharts/modules/offline-exporting';

const options: Highcharts.Options = {
  exporting: {
    enabled: true,
    buttons: {
      contextButton: {
        menuItems: ['downloadPNG', 'downloadPDF', 'downloadSVG', 'downloadCSV']
      }
    }
  }
};

Часові межи

3–5 типів графіків з drilldown та експортом — 3–5 днів.