DEV Community: simplyCode

Building a Real-Time Candlestick Chart with Next.js, Lightweight Charts, and InsightSentry

simplyCode — Mon, 27 Jan 2025 07:15:25 +0000

In this tutorial, we'll create a dynamic, real-time candlestick chart that visualizes cryptocurrency price data. We'll leverage Next.js for our frontend framework, Lightweight Charts for fast and interactive charting, and the InsightSentry API for streaming live market data via WebSockets.

Prerequisites:

Basic understanding of React and Next.js.
Node.js and npm (or yarn) installed on your system.
An API key from InsightSentry (https://insightsentry.com/).

Project Setup:

Create a Next.js App:

npx create-next-app@latest my-crypto-chart
cd my-crypto-chart

Install Dependencies:
```
npm install lightweight-charts
```

Code Structure:

We'll create a single component for our chart within the app directory (or pages directory if you are not using the app router). Let's name it Chart.tsx (or Chart.jsx if you prefer JavaScript).

Chart Component (Chart.tsx):

"use client";

import { createChart, ChartOptions, DeepPartial, UTCTimestamp, CandlestickSeries } from "lightweight-charts";
import { useCallback, useEffect, useRef } from "react";

// Replace with your actual InsightSentry API key
const wsapikey = "your key";

// Helper functions for time formatting
const formatTimeToHHMMSS = (timestamp: UTCTimestamp) => {
  const date = new Date(timestamp * 1000); // Convert to milliseconds
  return date.toLocaleTimeString('en-US', { hour12: false }); // Convert to 24-hour hh:mm:ss format
};
const formatDateToLocalTime = (timestamp: UTCTimestamp) => {
  const date = new Date(timestamp * 1000); // Convert to milliseconds
  return date.toLocaleString(); // Convert to local time string
};

// Chart options (customization)
const chartOptions: DeepPartial<ChartOptions> = {
  layout: {
    textColor: '#1e293b',
    background: { color: 'white' },
    attributionLogo: false
  },
  grid: {
    vertLines: {
      visible: false,
    },
    horzLines: {
      visible: false,
    },
  },
  autoSize: true,


  timeScale: {
    visible: true,
    timeVisible: true,
    ticksVisible: true,

    tickMarkFormatter: formatTimeToHHMMSS,
    borderColor: "#D1D5DB",
  },

  localization: {
    timeFormatter: formatDateToLocalTime,

  },
  rightPriceScale: {
    borderColor: "#e2e8f0",
  },

  crosshair: {
    horzLine: {
      visible: true,
      labelVisible: true,
      color: 'rgba(59, 130, 246, 0.5)', // Semi-transparent blue
    },
    vertLine: {
      visible: true,
      labelVisible: true,
      color: 'rgba(59, 130, 246, 0.5)', // Semi-transparent blue
    },
  },

};

export default function Chart() {
  const chartContainerRef = useRef<HTMLDivElement>(null);
  const wsRef = useRef<WebSocket | null>(null);
  const chartRef = useRef<any>(null);
  const seriesRef = useRef<any>(null);

  // WebSocket connection function (memoized with useCallback)
  const connectWebSocket = useCallback(() => {
    if (wsRef.current && wsRef.current.readyState === WebSocket.OPEN) {
      console.log("WebSocket already connected.");
      return;
    }
    const ws = new WebSocket('wss://realtime.insightsentry.com/live');
    ws.onopen = () => {
      const subMsg = JSON.stringify({
        api_key: wsapikey,
        subscriptions: [
          { code: 'BINANCE:BTCUSDT', bar_type: 'second', bar_interval: 1, type: 'series' }
        ]
      });
      ws.send(subMsg);
    };
    ws.onerror = () => {
      console.error('WebSocket error');
    }
    ws.onmessage = (event) => {
      try {
        const data = JSON.parse(event.data)
        if (!data.code) {
          return
        }

        if (data.series && seriesRef.current) {
          const formattedSeries = data.series.map(
            (item: {
              time: number
              open: number
              high: number
              low: number
              close: number
              volume: number
            }) => ({
              time: item.time,
              open: item.open,
              high: item.high,
              low: item.low,
              close: item.close,
              volume: item.volume
            })
          )
          for (const item of formattedSeries) {
            seriesRef.current.update(item)
          }
        }
      } catch (error) {
        console.error(error)
      }
    }

    ws.onclose = () => {
      console.log('WebSocket closed');
      setTimeout(() => {
        connectWebSocket();
      }, 2000);
    };

    wsRef.current = ws;
  }, []);

  // useEffect for chart creation and WebSocket connection
  useEffect(() => {
    if (chartContainerRef.current) {
      chartRef.current = createChart(chartContainerRef.current, chartOptions);
      seriesRef.current = chartRef.current.addSeries(CandlestickSeries, {
        priceFormat: {
          type: "price",
          minMove: 0.001
        },
        upColor: "#10B981",
        downColor: "#EF4444",
        borderVisible: false,
        wickUpColor: "#10B981",
        wickDownColor: "#EF4444",
      });
      seriesRef.current.setData([]);
      chartRef.current.timeScale().fitContent();

      connectWebSocket();
    }

    return () => {
      if (wsRef.current) {
        wsRef.current.close();
        wsRef.current = null;
      }
      if (chartRef.current) {
        chartRef.current.remove();
      }
    };
  }, [connectWebSocket]);

  return (
    <div ref={chartContainerRef} className="w-full h-[500px]" />
  );
}

Explanation:

Imports: Import necessary modules from lightweight-charts and react.
API Key: Replace YOUR_INSIGHTSENTRY_API_KEY with your actual API key.
Helper Functions: formatTimeToHHMMSS and formatDateToLocalTime format the timestamps for the chart's time scale.
Chart Options: The chartOptions object configures the appearance and behavior of the chart (colors, gridlines, watermark, crosshair, etc.).
Refs:
- chartContainerRef: A ref to the DOM element where the chart will be rendered.
- wsRef: A ref to store the WebSocket connection.
- chartRef: A ref to the created chart object.
- seriesRef: A ref to the candlestick series object.
connectWebSocket Function:
- Establishes a WebSocket connection to the InsightSentry API.
- Sends a subscription message to receive real-time data for BINANCE:BTCUSDT (you can change this to other symbols).
- Handles incoming data (onmessage) and updates the chart's series with the new data points.
- Implements reconnection logic (onclose) to automatically reconnect if the connection drops.
useEffect Hook:
- Creates the chart using createChart and attaches it to the chartContainerRef element.
- Adds a candlestick series to the chart using addCandlestickSeries.
- Sets initial data to an empty array ([]).
- Calls connectWebSocket to initiate the WebSocket connection.
- Cleanup Function: Closes the WebSocket connection and removes the chart when the component unmounts.
JSX: Renders a div element with the chartContainerRef to serve as the container for the chart.

Integrating the Chart Component:

Now, import and use the Chart component in your main page component (e.g., app/page.tsx):

import Chart from './Chart'; 

export default function Home() {
  return (
    <main>
      <h1>Real-Time Crypto Chart</h1>
      <Chart />
    </main>
  );
}

Running the Application:

Start the Next.js development server:

npm run dev

Open your browser and go to http://localhost:3000 (or the port indicated in your console). You should see a beautiful candlestick chart updating in real-time with data from InsightSentry!

Customization:

Chart Options: Explore more options provided by Lightweight Charts to customize the chart's appearance (colors, grid, axes, etc.). Refer to the Lightweight Charts documentation for details.
Data Subscription: Modify the subscriptions array in the connectWebSocket function to subscribe to different symbols or data types offered by the InsightSentry API.
Error Handling: Add more robust error handling to the onmessage event handler to gracefully handle potential issues with the data received from the API.
UI Enhancements: Add UI elements like a symbol selector, time interval controls, or technical indicators to enhance the user experience.

Conclusion:

This tutorial demonstrated how to build a real-time candlestick chart using Next.js, Lightweight Charts, and the InsightSentry API. You can expand upon this foundation to create sophisticated financial dashboards and data visualization tools. Remember to consult the documentation for Lightweight Charts and InsightSentry to explore their full capabilities. Happy charting!

2025 Best Data API for Financial data

simplyCode — Wed, 22 Jan 2025 08:28:02 +0000

For system traders or app developers looking to build a financial app, access to reliable, high-quality, and timely market data is the lifeblood of any successful strategy. In 2025, the landscape of financial data APIs is more competitive than ever. This article dives into a detailed comparison of four leading providers: Polygon.io, DataBento, YFinance, and InsightSentry, to help you determine which one best suits your trading needs.

Key Factors to Consider

When evaluating a data API for system trading, several critical factors come into play:

Data Coverage: The breadth and depth of asset classes, exchanges, and historical data offered.
Data Quality: Accuracy, reliability, and timeliness of the data feed.
Data Format: Ease of integration and use with your trading platform and analysis tools.
API Delivery: Availability of REST API and/or Websocket for real-time streaming.
Pricing: Cost-effectiveness and scalability as your trading operations grow.
Latency: Speed of data delivery, especially crucial for high-frequency trading.

Provider Comparison

Let's analyze each provider based on these criteria:

1. Polygon.io

Overview: Polygon.io is a popular choice known for its comprehensive coverage of US equities, options, and cryptocurrencies.

Strengths:

Strong US market coverage.
Well-regarded for data accuracy.
Offers both REST API and Websocket.

Weaknesses:

Limited coverage outside of US markets.
Can be relatively expensive, especially if you need real-time data.
Historical data depth may not be sufficient for some strategies.

2. DataBento

Overview: DataBento focuses on providing high-fidelity, low-latency market data, particularly for futures and options.

Strengths:

Exceptional speed and low latency.
Detailed historical data.
Strong focus on data quality and normalization.

Weaknesses:

Higher price point, making it less accessible for smaller traders.
Coverage may be narrower compared to providers with a broader focus.
Can be complex to integrate.

3. YFinance

Overview: YFinance is an open-source library that pulls data from Yahoo Finance. It's a popular choice for beginners and those on a tight budget.

Strengths:

Free and open-source.
Easy to use for basic data retrieval.
Decent coverage of major asset classes.

Weaknesses:

Reliability and data quality can be inconsistent.
Limited historical data depth.
No official support or guarantees.
No real-time data streaming; only offers REST API (which is also slower than others).

4. InsightSentry

Overview: InsightSentry is a comprehensive data provider offering real-time and historical data across a vast range of asset classes, including global stocks, futures, CFDs, forex, cryptocurrencies, and economic indicators.

Strengths:

Extensive Coverage: Supports over 250+ data sources, 9k+ indices, and 4k+ economic data points, providing a truly global perspective.
Unified Data Format: Simplifies integration by offering a consistent format for real-time, historical (30+ years), and economic data (20+ years), making it chart-ready.
Real-time Data: Delivers real-time data via both REST API and Websocket, including for crucial markets like CME Futures - all without additional fees.
Cost-Effective: Offers competitive pricing, especially considering the breadth of its offering.
Financial Data and Events: Includes financial data, option chains, and economic/earnings/dividend events.

Weaknesses:

Historical intraday data is limited to 20k data points.
REST API may have higher latency compared to DataBento, but Websocket offers a faster alternative.

Pricing Comparison (Excluding Free Tiers)

Provider	Basic Tier	Standard Tier	Pro Tier
Polygon.io	Mid-Range	High	Very High
DataBento	High	Very High	Premium
YFinance	N/A	N/A	N/A
InsightSentry	Low	Low	Mid-Range

Note: This is a general comparison. Specific pricing structures vary, and it's essential to consult each provider's website for detailed plans.

Conclusion

The best data API for your system trading needs depends on your specific requirements and budget.

YFinance is a good starting point for those on a very limited budget but lacks the reliability and features needed for serious trading.
Polygon.io is a solid choice for traders focused on US markets but can become expensive.
DataBento excels in low-latency and high-fidelity data, making it suitable for high-frequency trading, but comes with a premium price.
InsightSentry stands out for its exceptional coverage, unified data format, real-time capabilities, and cost-effectiveness. It offers a compelling solution for traders seeking a comprehensive and affordable data solution, especially those dealing with a global portfolio or relying heavily on economic data alongside traditional market data.

Ultimately, we recommend thoroughly evaluating each provider's features, pricing, and documentation. Consider starting with a trial or basic plan to test the data quality and integration before committing to a higher tier. By carefully considering your needs and the strengths of each provider, you can choose the data API that will power your trading success in 2025 and beyond.