hugo-trading-chart

TL;DR

hugo-trading-chart is a lightweight, interactive charting component for Hugo static sites. It allows you to display professional-grade stock trading charts (candlestick or area) with custom markers for buy/sell points and cost lines. It is built on top of Lightweight Charts and includes a Go utility to fetch historical data from Longport.

Installation

Step 1: Fetch Stock Chart Data

This project includes a Go utility to fetch historical stock data from Longport.

1. Prerequisites: You need a Longport account and API credentials (App Key, App Secret, Access Token).
2. Setup:
   Navigate to the fetch-chart-data directory:

   cd fetch-chart-data

   Set your Longport credentials as environment variables (refer to openapi-go documentation for details):

   export LONGPORT_APP_KEY="your_app_key"
   export LONGPORT_APP_SECRET="your_app_secret"
   export LONGPORT_ACCESS_TOKEN="your_access_token"

3. Fetch Data:
   Run the tool to download data. For example, to fetch NVIDIA (NVDA.US) data for Jan 2025:

   go run main.go \
     -symbol NVDA.US \
     -start 2025-01-01 \
     -end 2025-01-31 \
     -output ../static/data/NVDA.json

   Note: Ensure the output directory (e.g., ../static/data/) exists.

Step 2: Configure Hugo

Integrate the chart component into your Hugo project.

1. Copy Assets:
   Copy assets/js/trading-chart.js to your Hugo project's assets/js/ directory.
2. Copy Shortcode:
   Copy trading-chart.html to your Hugo project's layouts/shortcodes/ directory.

Usage

Use the trading-chart shortcode in your Markdown content.

Basic Example

{{< trading-chart 
    data="/data/NVDA.json" 
    symbol="NVDA" 
    name="NVIDIA Corp." 
>}}

Advanced Example (with Markers)

You can add buy/sell markers and cost lines using the markers parameter.

{{< trading-chart 
    data="/data/AAPL.json" 
    symbol="AAPL" 
    name="Apple Inc." 
    type="candlestick" 
    height="500px" 
    markers=[
        {"time": 1739285640, "price": 229.85, "text": "B", "position": "below", "color": "#ef5350", "costLine": true},
        {"type": "priceLine", "price": 240.00, "title": "Target", "color": "#26a69a"}
    ]
>}}

Parameters

License

MIT License