@tradingaction/table

Interactive table annotation for react-financial-charts.

Features

• Position tables at 9 different positions on your chart
• Automatic position calculation (no manual coordinate needed)
• Customize cell fill color and text color
• Origin-based positioning (stays consistent on pan)

Installation

npm install @tradingaction/table

Usage

import { Table } from '@tradingaction/table';

<Table
  position="top_right"
  rows={[
    { label: "Price", value: "$100.50", labelFill: "#fff", valueFill: "#ffff00" },
    { label: "Change", value: "+2.5%", labelFill: "#fff", valueFill: "#00ff00" },
  ]}
  cellFill="#1a1a1a"
  cellBorder="#555"
  padding={8}
/>

Positions

Available positions (3x3 grid):

• top_left, top_center, top_right
• middle_left, middle_center, middle_right
• bottom_left, bottom_center, bottom_right

Props

• position: Position on the chart
• rows: Array of row data with labels and values
• cellFill: Background color of cells
• cellBorder: Border color of cells
• textFill: Default text color
• fontSize: Font size (default: 12)
• fontFamily: Font family (default: system)
• padding: Cell padding (default: 4)