### Install Highcharts React

Source: https://github.com/highcharts/highcharts-react/blob/master/README.md

Install Highcharts and the React wrapper using npm or yarn. Ensure React and ReactDOM are installed as peer dependencies.

```bash
npm install highcharts @highcharts/react
```

```bash
yarn add highcharts @highcharts/react
```

```bash
npm install react react-dom
```

--------------------------------

### Quick Start: Render a React Chart

Source: https://github.com/highcharts/highcharts-react/blob/master/README.md

Import Chart components and Series types from '@highcharts/react' to create a chart with multiple series. This example demonstrates a basic setup for rendering a chart with line, column, and area series.

```jsx
import React from 'react';
import { createRoot } from 'react-dom/client';
import { Chart, Title, Series } from '@highcharts/react';
import { ColumnSeries } from '@highcharts/react/series/Column';
import { AreaSeries } from '@highcharts/react/series/Area';

export function Application() {
  return (
    <Chart>
      <Title>Chart with multiple series types</Title>
      <Series
        data={[2, 4, 3, 1, 5]}
        options={{ name: 'Line series', color: 'red' }}
      />
      <ColumnSeries
        data={[3, 5, 1, 2, 4]}
        options={{ name: 'Column series', color: 'yellow' }}
      />
      <AreaSeries
        data={[4, 2, 1, 5, 3]}
        options={{ name: 'Area series', color: 'blue' }}
      />
    </Chart>
  );
}

const root = createRoot(document.getElementById('root'));

root.render(<Application />);
```

--------------------------------

### Install Highcharts React and Peer Dependency

Source: https://context7.com/highcharts/highcharts-react/llms.txt

Install the package and its highcharts peer dependency using npm or yarn.

```bash
npm install highcharts @highcharts/react
# or
yarn add highcharts @highcharts/react
```

--------------------------------

### Create a Highcharts Gantt Chart with React Components

Source: https://context7.com/highcharts/highcharts-react/llms.txt

Use the `<GanttChart>` component for project timeline visualizations. Import from `@highcharts/react/Gantt`. Define tasks with start and end dates, and configure axes and series declaratively.

```jsx
import React from 'react';
import { GanttChart, Title, XAxis, YAxis } from '@highcharts/react/Gantt';
import { GanttSeries } from '@highcharts/react/series/Gantt';

const tasks = [
  { name: 'Design', start: Date.UTC(2024, 2, 1), end: Date.UTC(2024, 2, 15), completed: { amount: 1 } },
  { name: 'Development', start: Date.UTC(2024, 2, 10), end: Date.UTC(2024, 3, 20), completed: { amount: 0.6 } },
  { name: 'Testing', start: Date.UTC(2024, 3, 15), end: Date.UTC(2024, 4, 5), completed: { amount: 0.1 } },
];

export function ProjectTimeline() {
  return (
    <GanttChart containerProps={{ style: { height: '300px' } }}>
      <Title>Project Timeline Q1–Q2 2024</Title>
      <XAxis type="datetime" />
      <YAxis categories={['Design', 'Development', 'Testing']} />
      <GanttSeries
        data={tasks}
        options={{ name: 'Tasks', dataLabels: { enabled: true } }}
      />
    </GanttChart>
  );
}
```

--------------------------------

### Enable Chart Exporting with `<Exporting>`

Source: https://context7.com/highcharts/highcharts-react/llms.txt

Use the `<Exporting>` component to add a menu for downloading charts in various formats (PNG, PDF, CSV, etc.) and for printing. Configure menu items and CSV export options.

```jsx
import React from 'react';
import { Chart, Title } from '@highcharts/react';
import { Exporting } from '@highcharts/react/options/Exporting';
import { ColumnSeries } from '@highcharts/react/series/Column';

export function ExportableChart() {
  return (
    <Chart>
      <Title>Exportable Sales Report</Title>
      <Exporting
        enabled={true}
        filename="sales-report-2024"
        allowHTML={true}
        buttons={{
          contextButton: {
            menuItems: ['downloadPNG', 'downloadPDF', 'separator', 'downloadCSV', 'viewData'],
          },
        }}
        csv={{
          dateFormat: '%Y-%m-%d',
          itemDelimiter: ',',
        }}
      />
      <ColumnSeries
        data={[120, 145, 98, 173, 201, 188]}
        options={{ name: 'Revenue ($K)', colorByPoint: true }}
      />
    </Chart>
  );
}
```

--------------------------------

### Create a Highstock Chart with React Components

Source: https://context7.com/highcharts/highcharts-react/llms.txt

Use the `<StockChart>` component for time-series data with navigator and range selector. Import from `@highcharts/react/Stock`. Configure axes, tooltips, and series declaratively.

```jsx
import React from 'react';
import { StockChart, Title } from '@highcharts/react/Stock';
import { CandlestickSeries } from '@highcharts/react/series/Candlestick';
import { XAxis, YAxis, Tooltip } from '@highcharts/react/Stock';

const ohlcData = [
  [Date.UTC(2024, 0, 2), 148.5, 151.2, 147.8, 150.3],
  [Date.UTC(2024, 0, 3), 150.3, 153.0, 149.5, 152.1],
  [Date.UTC(2024, 0, 4), 152.1, 154.8, 151.0, 153.7],
  [Date.UTC(2024, 0, 5), 153.7, 155.2, 150.9, 151.5],
];

export function StockPriceChart() {
  return (
    <StockChart containerProps={{ style: { height: '500px' } }}>
      <Title>ACME Corp — Daily OHLC</Title>
      <XAxis type="datetime" />
      <YAxis title={{ text: 'Price (USD)' }} />
      <Tooltip split={false} valueDecimals={2} valuePrefix="$" />
      <CandlestickSeries
        data={ohlcData}
        options={{ name: 'ACME', color: '#d9534f', upColor: '#5cb85c' }}
      />
    </StockChart>
  );
}
```

--------------------------------

### Create a Standard Highcharts Chart with React Components

Source: https://context7.com/highcharts/highcharts-react/llms.txt

Use the `<Chart>` component as the root for standard Highcharts charts. Nest other option and series components as children. The `ref` prop provides access to the raw Highcharts chart instance.

```jsx
import React, { useRef, useEffect } from 'react';
import { Chart, Title, Series } from '@highcharts/react';
import { ColumnSeries } from '@highcharts/react/series/Column';
import { AreaSeries } from '@highcharts/react/series/Area';

export function SalesChart() {
  const chartRef = useRef(null);

  useEffect(() => {
    if (chartRef.current?.chart) {
      // Access the raw Highcharts chart instance
      console.log('Chart type:', chartRef.current.chart.options.chart.type);
    }
  }, []);

  return (
    <Chart
      ref={chartRef}
      containerProps={{ style: { width: '100%', height: '400px' } }}
    >
      <Title>Monthly Sales</Title>
      <ColumnSeries
        data={[120, 145, 98, 173, 201]},
        options={{ name: 'Revenue', color: '#4f86c6' }}
      />
      <AreaSeries
        data={[80, 110, 75, 140, 165]},
        options={{ name: 'Units Sold', color: '#e07b39' }}
      />
    </Chart>
  );
}
```

--------------------------------

### Create a World Population Map with MapsChart

Source: https://context7.com/highcharts/highcharts-react/llms.txt

Use the MapsChart component for geographic map charts. Ensure map data and series data are correctly formatted.

```jsx
import React from 'react';
import { MapsChart, Title, Tooltip } from '@highcharts/react/Maps';
import { MapSeries } from '@highcharts/react/series/Map';
import mapData from '@highcharts/map-collection/custom/world.geo.json';

const populationData = [
  { 'hc-key': 'us', value: 331000000 },
  { 'hc-key': 'cn', value: 1411000000 },
  { 'hc-key': 'br', value: 214000000 },
];

export function WorldPopulationMap() {
  return (
    <MapsChart containerProps={{ style: { height: '500px' } }}>
      <Title>World Population</Title>
      <Tooltip valueSuffix=" people" />
      <MapSeries
        data={populationData}
        options={{
          name: 'Population',
          mapData,
          joinBy: 'hc-key',
          colorAxis: { min: 0 },
        }}
      />
    </MapsChart>
  );
}
```

--------------------------------

### Customize Tooltip with HTML and Shared Data

Source: https://context7.com/highcharts/highcharts-react/llms.txt

Implement a custom tooltip using the Tooltip component. Supports shared data, HTML content formatting, and various styling options like background color, border, and shadow. The formatter function allows dynamic generation of tooltip content based on chart data.

```jsx
import React from 'react';
import { Chart, Title, Tooltip } from '@highcharts/react';
import { ColumnSeries } from '@highcharts/react/series/Column';
import { XAxis } from '@highcharts/react';

export function CustomTooltipChart() {
  return (
    <Chart>
      <Title>Sales by Quarter</Title>
      <XAxis categories={['Q1', 'Q2', 'Q3', 'Q4']} />
      <Tooltip
        shared={true}
        useHTML={true}
        formatter={function () {
          const points = this.points
            .map(p => `<span style="color:${p.color}">●</span> ${p.series.name}: <b>$${p.y}K</b>`)
            .join('<br/>');
          return `<b>${this.x}</b><br/>${points}`;
        }}
        backgroundColor="rgba(255,255,255,0.95)"
        borderColor="#ccc"
        borderRadius={8}
        shadow={true}
      />
      <ColumnSeries data={[120, 145, 98, 173]} options={{ name: 'Product A' }} />
      <ColumnSeries data={[80, 110, 130, 95]} options={{ name: 'Product B' }} />
    </Chart>
  );
}
```

--------------------------------

### Create a Chart with Mixed Typed Series Components

Source: https://context7.com/highcharts/highcharts-react/llms.txt

Utilize dedicated typed series components (e.g., ColumnSeries, LineSeries, BubbleSeries) for enhanced TypeScript autocompletion. These are intended for use within an existing Chart component.

```jsx
import React from 'react';
import { Chart, Title, XAxis, YAxis } from '@highcharts/react';
import { ColumnSeries } from '@highcharts/react/series/Column';
import { LineSeries } from '@highcharts/react/series/Line';
import { BubbleSeries } from '@highcharts/react/series/Bubble';

const categories = ['Jan', 'Feb', 'Mar', 'Apr', 'May'];

export function MixedTypedSeriesChart() {
  return (
    <Chart containerProps={{ style: { height: '400px' } }}>
      <Title>Typed Series Components</Title>
      <XAxis categories={categories} />
      <YAxis title={{ text: 'Value' }} />

      <ColumnSeries
        data={[49.9, 71.5, 106.4, 129.2, 176.0]}
        options={{ name: 'Rainfall (mm)', yAxis: 0 }}
      />
      <LineSeries
        data={[7.0, 6.9, 9.5, 14.5, 18.2]}
        options={{ name: 'Temperature (°C)', yAxis: 0 }}
      />
      <BubbleSeries
        data={[{ x: 0, y: 49.9, z: 40 }, { x: 2, y: 106.4, z: 60 }, { x: 4, y: 176.0, z: 80 }]}
        options={{ name: 'Bubble metric' }}
      />
    </Chart>
  );
}
```

--------------------------------

### Register Custom Highcharts Instance with `setHighcharts`

Source: https://context7.com/highcharts/highcharts-react/llms.txt

Use `setHighcharts` to register a custom Highcharts instance, potentially with modules applied, and `getHighcharts` to retrieve it. This is useful for pre-configured or modified Highcharts environments.

```jsx
import React from 'react';
import Highcharts from 'highcharts/esm/highcharts.src.js';
import HighchartsMore from 'highcharts/esm/highcharts-more.src.js';
import Accessibility from 'highcharts/esm/modules/accessibility.src.js';
import { setHighcharts, getHighcharts, Chart, Title } from '@highcharts/react';
import { GaugeSeries } from '@highcharts/react/series/Gauge';

// Apply modules to custom instance
HighchartsMore(Highcharts);
Accessibility(Highcharts);

// Register with @highcharts/react
setHighcharts(Highcharts);

// Verify the instance is registered
const hc = getHighcharts();
console.log('Using Highcharts with modules:', hc.__provided); // true

export function GaugeChart() {
  return (
    <Chart>
      <Title>Speedometer</Title>
      <GaugeSeries
        data={[80]}
        options={{
          name: 'Speed',
          dial: { radius: '80%', backgroundColor: '#333' },
          pivot: { backgroundColor: '#333' },
          dataLabels: { format: '{y} km/h' },
        }}
      />
    </Chart>
  );
}
```

--------------------------------

### Create a Multi-Series Chart with Generic Series Component

Source: https://context7.com/highcharts/highcharts-react/llms.txt

Use the generic Series component to add multiple series of different types to a chart. The series type is inferred at runtime.

```jsx
import React from 'react';
import { Chart, Title, Series } from '@highcharts/react';

export function MultiSeriesChart() {
  return (
    <Chart>
      <Title>Chart with multiple series types</Title>
      {/* Generic Series — type inferred at runtime */}
      <Series
        type="line"
        data={[2, 4, 3, 5, 1]}
        options={{ name: 'Trend', color: '#7cb5ec', dashStyle: 'ShortDash' }}
      />
      <Series
        type="column"
        data={[3, 5, 1, 2, 4]}
        options={{ name: 'Volume', color: '#90ed7d' }}
      />
      <Series
        type="pie"
        data={[
          { name: 'Chrome', y: 63.1 },
          { name: 'Firefox', y: 10.4 },
          { name: 'Safari', y: 19.6 },
        ]}
        options={{ name: 'Market Share', center: ['75%', '50%'], size: '35%' }}
      />
    </Chart>
  );
}
```

--------------------------------

### Implement Drilldown Functionality with Series Data

Source: https://context7.com/highcharts/highcharts-react/llms.txt

Enable drilldown on chart data points using the Drilldown component. This requires defining drilldown series and linking them to data points via the 'drilldown' property. Customize active label styles for drilldown interactions.

```jsx
import React from 'react';
import { Chart, Title, Drilldown, XAxis, YAxis } from '@highcharts/react';
import { ColumnSeries } from '@highcharts/react/series/Column';

const drilldownSeries = [
  { id: 'q1', name: 'Q1 Breakdown', type: 'column', data: [{ name: 'Jan', y: 38 }, { name: 'Feb', y: 41 }, { name: 'Mar', y: 41 }] },
  { id: 'q2', name: 'Q2 Breakdown', type: 'column', data: [{ name: 'Apr', y: 45 }, { name: 'May', y: 52 }, { name: 'Jun', y: 48 }] },
];

export function DrilldownChart() {
  return (
    <Chart>
      <Title>Annual Sales — Click to drill down</Title>
      <XAxis categories={['Q1', 'Q2', 'Q3', 'Q4']} />
      <YAxis title={{ text: 'Sales ($K)' }} />
      <Drilldown
        series={drilldownSeries}
        activeAxisLabelStyle={{ color: '#0066cc', textDecoration: 'none' }}
      />
      <ColumnSeries
        data={[
          { name: 'Q1', y: 120, drilldown: 'q1' },
          { name: 'Q2', y: 145, drilldown: 'q2' },
          { name: 'Q3', y: 98 },
          { name: 'Q4', y: 173 },
        ]}
        options={{ name: 'Quarterly Sales', colorByPoint: true }}
      />
    </Chart>
  );
}
```

--------------------------------

### Style Chart Legend with Layout and Item Styles

Source: https://context7.com/highcharts/highcharts-react/llms.txt

Control the chart legend's appearance and behavior using the Legend component. Options include layout (horizontal/vertical), alignment, item styling (font weight, size), hover styles, and border/padding configurations. This allows for a customized legend that fits the chart's design.

```jsx
import React from 'react';
import { Chart, Title, Legend } from '@highcharts/react';
import { LineSeries } from '@highcharts/react/series/Line';

export function StyledLegendChart() {
  return (
    <Chart>
      <Title>Market Indices</Title>
      <Legend
        layout="horizontal"
        align="center"
        verticalAlign="bottom"
        itemStyle={{ fontWeight: 'normal', fontSize: '13px' }}
        itemHoverStyle={{ color: '#000' }}
        borderWidth={1}
        borderColor="#e0e0e0"
        borderRadius={4}
        padding={8}
      />
      <LineSeries data={[1.2, 1.5, 1.3, 1.7, 1.9]} options={{ name: 'S&P 500' }} />
      <LineSeries data={[0.9, 1.1, 0.8, 1.2, 1.4]} options={{ name: 'NASDAQ' }} />
      <LineSeries data={[1.0, 1.2, 1.1, 1.3, 1.5]} options={{ name: 'DOW' }} />
    </Chart>
  );
}
```

--------------------------------

### Integrate Technical Indicators with StockChart

Source: https://context7.com/highcharts/highcharts-react/llms.txt

Add technical analysis indicators like SMA, BB, and MACD to a StockChart. Indicators require a linked series `id` and are configured via their respective components.

```jsx
import React from 'react';
import { StockChart, Title, XAxis, YAxis } from '@highcharts/react/Stock';
import { CandlestickSeries } from '@highcharts/react/series/Candlestick';
import { SMASeries } from '@highcharts/react/indicators/SMA';
import { BBSeries } from '@highcharts/react/indicators/BB';
import { MACDSeries } from '@highcharts/react/indicators/MACD';

const priceData = [
  [Date.UTC(2024, 0, 2), 148.5, 151.2, 147.8, 150.3],
  [Date.UTC(2024, 0, 3), 150.3, 153.0, 149.5, 152.1],
  [Date.UTC(2024, 0, 4), 152.1, 154.8, 151.0, 153.7],
  [Date.UTC(2024, 0, 5), 153.7, 155.2, 150.9, 151.5],
  [Date.UTC(2024, 0, 8), 151.5, 156.0, 150.0, 155.2],
  [Date.UTC(2024, 0, 9), 155.2, 157.8, 154.1, 157.0],
];

export function TechnicalAnalysisChart() {
  return (
    <StockChart containerProps={{ style: { height: '600px' } }}>
      <Title>ACME — Technical Analysis</Title>
      <XAxis type="datetime" />

      {/* Main price pane */}
      <YAxis height="60%" title={{ text: 'Price' }}>
        <CandlestickSeries
          id="price"
          data={priceData}
          options={{ name: 'ACME Price', color: '#d9534f', upColor: '#5cb85c' }}
        />
        <SMASeries
          options={{ linkedTo: 'price', name: 'SMA(5)', params: { period: 5 }, color: '#f39c12' }}
        />
        <BBSeries
          options={{
            linkedTo: 'price',
            name: 'Bollinger Bands(20)',
            params: { period: 20, standardDeviation: 2 },
            color: '#3498db',
            fillColor: 'rgba(52, 152, 219, 0.1)',
          }}
        />
      </YAxis>

      {/* MACD pane */}
      <YAxis top="65%" height="35%" offset={0} title={{ text: 'MACD' }}>
        <MACDSeries
          options={{
            linkedTo: 'price',
            name: 'MACD',
            params: { fastAvgPeriod: 12, slowAvgPeriod: 26, signalPeriod: 9 },
          }}
        />
      </YAxis>
    </StockChart>
  );
}
```

--------------------------------

### Enable Debug Logging with Logger

Source: https://context7.com/highcharts/highcharts-react/llms.txt

Control internal logging verbosity using the Logger object. Set logLevel to 'debug' during development to trace chart updates. Suppress all logging in production by setting it to 'silent'.

```jsx
import { Logger, Chart, Series } from '@highcharts/react';

// Enable debug logging in development
if (process.env.NODE_ENV === 'development') {
  Logger.logLevel = 'debug';
}

// Suppress all logging in production (default)
Logger.logLevel = 'silent';

// Manually emit a log entry
Logger.log('Chart initialized', { timestamp: Date.now() });

export function DebugChart() {
  return (
    <Chart>
      <Series type="line" data={[1, 2, 3, 4, 5]} options={{ name: 'Debug series' }} />
    </Chart>
  );
}
```

--------------------------------

### Add Title and Subtitle to a Chart

Source: https://context7.com/highcharts/highcharts-react/llms.txt

Use the Title and Subtitle components to add text elements to your chart. Text can be provided as children or via the 'text' prop, and styling/alignment options are available.

```jsx
import React from 'react';
import { Chart, Title, Series } from '@highcharts/react';
import { Subtitle } from '@highcharts/react/options/Subtitle';

export function TitledChart() {
  return (
    <Chart>
      <Title align="left" style={{ fontSize: '20px', fontWeight: 'bold' }}>
        Annual Revenue Report
      </Title>
      <Subtitle align="left">Fiscal Year 2024</Subtitle>
      <Series
        type="line"
        data={[420, 510, 490, 680, 730, 800]}
        options={{ name: 'Revenue ($K)' }}
      />
    </Chart>
  );
}
```

--------------------------------

### Configure XAxis and YAxis with Plot Bands and Lines

Source: https://context7.com/highcharts/highcharts-react/llms.txt

Use XAxis and YAxis components to define chart axes. Supports datetime types, categories, plot bands, plot lines, label formatting, and crosshairs. Configure axis titles, min/max values, and visual elements like plot bands and lines.

```jsx
import React from 'react';
import { Chart, Title } from '@highcharts/react';
import { XAxis, YAxis } from '@highcharts/react';
import { LineSeries } from '@highcharts/react/series/Line';

export function AnnotatedAxesChart() {
  return (
    <Chart>
      <Title>Temperature Over Time</Title>

      <XAxis
        type="datetime"
        labels={{ format: '{value:%b %e}' }}
        crosshair={{ color: '#ccc', dashStyle: 'ShortDot' }}
      />

      <YAxis
        title={{ text: 'Temperature (°C)' }}
        min={-10}
        max={40}
        plotBands={{
          from: 0,
          to: 10,
          color: 'rgba(68, 170, 213, 0.1)',
          label: { text: 'Cold zone', align: 'left', x: 10 },
        }}
        plotLines={{
          value: 25,
          color: '#FF0000',
          dashStyle: 'ShortDash',
          width: 2,
          label: { text: 'Heat warning', align: 'right' },
        }}
      />

      <LineSeries
        data={[
          [Date.UTC(2024, 5, 1), 18],
          [Date.UTC(2024, 5, 15), 24],
          [Date.UTC(2024, 6, 1), 31],
          [Date.UTC(2024, 6, 15), 27],
        ]}
        options={{ name: 'Daily High' }}
      />
    </Chart>
  );
}
```

--------------------------------

### Customize Chart Container with containerProps

Source: https://context7.com/highcharts/highcharts-react/llms.txt

Pass any HTML div attributes directly to the chart's wrapping container for layout control, CSS classes, or data attributes. This allows for flexible styling and accessibility.

```jsx
import React from 'react';
import { Chart, Title, Series } from '@highcharts/react';

export function ResponsiveChart() {
  return (
    <Chart
      containerProps={{
        id: 'main-chart',
        className: 'chart-shell rounded-lg shadow-md',
        style: { width: '100%', height: '400px', minHeight: '300px' },
        'data-testid': 'sales-chart',
        role: 'img',
        'aria-label': 'Sales performance chart',
      }}
    >
      <Title>Responsive Sales Chart</Title>
      <Series
        type="area"
        data={[29.9, 71.5, 106.4, 129.2, 144.0, 176.0]},
        options={{ name: 'Revenue', color: '#4f86c6', fillOpacity: 0.3 }}
      />
    </Chart>
  );
}
```

--------------------------------

### Customize Chart Container Props

Source: https://github.com/highcharts/highcharts-react/blob/master/README.md

Pass props directly to the chart's container div using `containerProps`. This allows for setting styles, classes, or data attributes on the container element.

```jsx
<Chart
  containerProps={{
    className: 'chart-shell',
    style: { width: '100%', height: '100%' }
  }}
>
  <Title>Full-width chart</Title>
  <Series data={[1, 2, 3]} />
</Chart>
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.