Next.js

The charting library provides a Next.js component that works with both client-side rendering and dynamic imports.

Installation

npm install financial-charting-library

Important: Client-Side Only

Since the charting library uses browser APIs, it must be rendered on the client-side only in Next.js.

Basic Usage

1. Use Dynamic Import

'use client';

import dynamic from 'next/dynamic';

// Import the component with SSR disabled
const ChartComponent = dynamic(
  () => import('financial-charting-library/nextjs'),
  { ssr: false }
);

2. Create Your Page Component

'use client';

import React, { useMemo } from 'react';
import dynamic from 'next/dynamic';

const ChartComponent = dynamic(
  () => import('financial-charting-library/nextjs'),
  { ssr: false }
);

export default function ChartPage() {
  const datafeed = useMemo(() => {
    return new YourDataFeedImplementation();
  }, []);

  return (
    <div style={{ padding: '20px' }}>
      <h1>Financial Chart</h1>
      <div style={{ height: '600px' }}>
        <ChartComponent
          symbol="AAPL"
          interval="1D"
          theme="light"
          autosize
          datafeed={datafeed}
        />
      </div>
    </div>
  );
}

Props

The Next.js ChartComponent accepts these props:

Prop	Type	Description
datafeed	IBasicDataFeed	Required - Datafeed instance
symbol	string	Required - Symbol to display
interval	string	Required - Timeframe
theme	string	'light' or 'dark'
autosize	boolean	Auto-resize to container
width	string	Chart width (if not autosize)
height	string	Chart height (if not autosize)

Complete Example

Here's a complete page with controls:

'use client';

import React, { useState, useMemo } from 'react';
import dynamic from 'next/dynamic';

const ChartComponent = dynamic(
  () => import('financial-charting-library/nextjs'),
  { ssr: false }
);

export default function ChartPage() {
  const [symbol, setSymbol] = useState('AAPL');
  const [theme, setTheme] = useState('light');

  const datafeed = useMemo(() => {
    return new YourDataFeedImplementation();
  }, []);

  const toggleTheme = () => {
    setTheme(prev => prev === 'light' ? 'dark' : 'light');
  };

  return (
    <div style={{ padding: '20px' }}>
      <h1>Financial Chart - Next.js Example</h1>
      
      {/* Controls */}
      <div style={{ marginBottom: '20px', display: 'flex', gap: '10px' }}>
        <button onClick={() => setSymbol('AAPL')}>AAPL</button>
        <button onClick={() => setSymbol('GOOGL')}>GOOGL</button>
        <button onClick={() => setSymbol('MSFT')}>MSFT</button>
        <button onClick={toggleTheme}>
          Toggle Theme ({theme})
        </button>
      </div>

      {/* Chart */}
      <div style={{ height: '600px', border: '1px solid #ccc' }}>
        <ChartComponent
          symbol={symbol}
          interval="1D"
          theme={theme}
          autosize
          datafeed={datafeed}
        />
      </div>
    </div>
  );
}

With External Dependencies

If your datafeed requires external libraries (like lodash, socket.io), load them first:

'use client';

import React, { useState, useEffect, useMemo } from 'react';
import dynamic from 'next/dynamic';
import Script from 'next/script';

const ChartComponent = dynamic(
  () => import('financial-charting-library/nextjs'),
  { ssr: false }
);

export default function ChartPage() {
  const [scriptsLoaded, setScriptsLoaded] = useState({
    lodash: false,
    socketio: false
  });

  const datafeed = useMemo(() => {
    // Only create datafeed when scripts are loaded
    if (scriptsLoaded.lodash && scriptsLoaded.socketio) {
      return new YourDataFeedImplementation();
    }
    return null;
  }, [scriptsLoaded]);

  return (
    <div style={{ padding: '20px' }}>
      {/* Load external scripts */}
      <Script 
        src="https://cdn.jsdelivr.net/npm/lodash@4.17.21/lodash.min.js" 
        onLoad={() => setScriptsLoaded(prev => ({ ...prev, lodash: true }))}
      />
      <Script 
        src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/4.5.0/socket.io.min.js" 
        onLoad={() => setScriptsLoaded(prev => ({ ...prev, socketio: true }))}
      />
      
      <h1>Financial Chart</h1>
      <div style={{ height: '600px' }}>
        {datafeed ? (
          <ChartComponent
            symbol="AAPL"
            interval="1D"
            theme="light"
            autosize
            datafeed={datafeed}
          />
        ) : (
          <div>Loading dependencies...</div>
        )}
      </div>
    </div>
  );
}

App Router vs Pages Router

App Router (Next.js 13+)

Use the 'use client' directive at the top of your file:

// app/chart/page.tsx
'use client';

import dynamic from 'next/dynamic';

const ChartComponent = dynamic(
  () => import('financial-charting-library/nextjs'),
  { ssr: false }
);

export default function ChartPage() {
  // Your component code
}

Pages Router

// pages/chart.tsx
import dynamic from 'next/dynamic';

const ChartComponent = dynamic(
  () => import('financial-charting-library/nextjs'),
  { ssr: false }
);

export default function ChartPage() {
  // Your component code
}

Next Steps

• Learn about DataFeed implementation
• Explore Chart Configuration
• Add Custom Indicators

Use the Next.js adapter exported from financial-charting-library/nextjs.

It re-exports the React adapter with the use client directive.