📈 Payoff Chart - Option Chart

A lightweight and interactive JavaScript library to visualize option payoff diagrams based on TradingView's powerful Lightweight Charts. Perfect for traders, educators, and developers building financial tools or option strategy visualizations.

Demo Light Version

Demo Dark Version

🚀 Features

• ⚡ Based on TradingView’s ultra-fast Lightweight Charts

• 🎨 Customizable colors, breakeven lines, and PnL zones

• 📱 Works in all modern browsers

• 🛠️ Easy integration with any JavaScript/ES6 project

📦 Installation

  npm install payoff-chart

Or via CDN:

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/payoff-chart.js"></script>

<script>
  
  const payoffchart = new Payoffchart('payoff-chart', { width: 400, height: 300 });

</script>

es6 module.

<script type="module">
  
  import Payoffchart from "https://cdn.jsdelivr.net/npm/[email protected]/dist/payoff-chart.esm.js";

  const payoffchart = new Payoffchart('payoff-chart', { width: 400, height: 300 });
  
</script>

Installation for React-App.

  npm install payoff-chart

import { useEffect } from 'react';
import Payoffchart from 'payoff-chart';

function App() {

  useEffect(() => {
    
    const payoffchart = new Payoffchart('payoff-chart', { width: 400, height: 300 });
    
    payoffchart.setExpiryPriceLine([
      { strike: 100, value: 1 },
      { strike: 110, value: 1 },
      { strike: 120, value: -1 }
    ]);
    
  }, []);

  return (
    <div id="payoff-chart"></div>
  );
}

export default App;

🛠️ Usage.

To create a basic payoff chart.

import Payoffchart from 'payoff-chart';

const payoffchart = new Payoffchart('payoff-chart', { width: 400, height: 300 });

payoffchart.setExpiryPriceLine([
  { strike: 100, value: 1 },
  { strike: 110, value: 1 },
  { strike: 120, value: -1 }
]);

payoffchart.setTodayPriceLine([
  { strike: 100, value: 1 },
  { strike: 120, value: -1 },
]);

/* adding the vertical line */
payoffchart.addVertLine({
  strike: 110,
  value: 1,
  options: {
    labelText: 'Break Event',
    color: '#777',
    labelTextColor: '#777'
  }
});

To add or remove the vertical line.

/* adding the vertical line */
const breakEventLine = payoffchart.addVertLine({
  strike: 110,
  value: 1,
  options: {
    labelText: 'Break Event',
    color: '#777',
    labelTextColor: '#777'
  }
});

/* removing the vertical line */
payoffchart.removeVertLine(breakEventLine);

🎨 Customization.

You can use the Lightweight Charts API directly. Lightweight Charts Documentation

Example: Change the background color and grid line color.

  payoffchart.chart.applyOptions({
    layout: {
      background: { color: "#000" },
      textColor: "#fff",
      fontSize: 12,
      //fontFamily: 'your font here'
    },
    grid: {
      vertLines: { color: "#555" },
      horzLines: { color: "#555" },
    }
  })

Example: Change the expiry price line color and width.

  payoffchart.expiryPriceLine.applyOptions({
    lineWidth: 4,
    topLineColor: 'rgb(0,53,255)',
    topFillColor1: 'rgba( 0, 0, 0, 0)',
    topFillColor2: 'rgba( 0, 0, 0, 0)',
    bottomLineColor: 'rgb(210,0,255)',
    bottomFillColor1: 'rgba( 0, 0, 0, 0)',
    bottomFillColor2: 'rgba( 0, 0, 0, 0)',
  })

Example: Change the today price line color and width.

  payoffchart.todayPriceLine.applyOptions({
    lineWidth: 4,
    topLineColor: 'rgb(255,130, 0)',
    topFillColor1: 'rgba( 0, 0, 0, 0)',
    topFillColor2: 'rgba( 0, 0, 0, 0)',
    bottomLineColor: 'rgb(255,130, 0)',
    bottomFillColor1: 'rgba( 0, 0, 0, 0)',
    bottomFillColor2: 'rgba( 0, 0, 0, 0)',
  })