Interactive Charts on Highcharts for Website

Building Interactive Charts with Highcharts for Websites

Highcharts is a commercial library (free for non-commercial projects) with rich functionality: 40+ chart types, export options, Stock charts, and Maps. Known for stability and extensive documentation.

Installation

npm install highcharts highcharts-react-official

Basic 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: 'Revenue',
        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 (for Financial Data)

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: '1d' },
        { type: 'week', count: 1, text: '1w' },
        { type: 'month', count: 1, text: '1m' },
        { type: 'year', count: 1, text: '1y' },
        { type: 'all', text: 'All' }
      ]
    },
    yAxis: [
      {
        labels: { align: 'right', x: -3 },
        title: { text: 'OHLC' },
        height: '60%',
        lineWidth: 2
      },
      {
        labels: { align: 'right', x: -3 },
        title: { text: 'Volume' },
        top: '65%',
        height: '35%',
        lineWidth: 2
      }
    ],
    series: [
      {
        type: 'candlestick',
        name: 'Price',
        data: ohlcData,
        upColor: '#22c55e',
        color: '#ef4444'
      },
      {
        type: 'column',
        name: 'Volume',
        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: 'Categories',
    data: [
      { name: 'Electronics', y: 543000, drilldown: 'electronics' },
      { name: 'Clothing', y: 321000, drilldown: 'clothes' }
    ]
  }],
  drilldown: {
    series: [
      {
        id: 'electronics',
        data: [
          ['Smartphones', 230000],
          ['Laptops', 180000],
          ['Accessories', 133000]
        ]
      }
    ]
  }
};

Export to 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']
      }
    }
  }
};

Timeline

3–5 chart types with drilldown and export — 3–5 days.