Kagi Chart

Quick Start

import { KagiChart } from "@chartts/react"
 
const data = [
  { date: "2024-01-02", close: 172.1 },
  { date: "2024-01-03", close: 174.9 },
  { date: "2024-01-04", close: 173.5 },
  { date: "2024-01-05", close: 177.6 },
  { date: "2024-01-08", close: 176.2 },
  { date: "2024-01-09", close: 179.8 },
  { date: "2024-01-10", close: 175.3 },
  { date: "2024-01-11", close: 181.2 },
  { date: "2024-01-12", close: 180.0 },
  { date: "2024-01-16", close: 184.5 },
]
 
export function PriceKagi() {
  return (
    <KagiChart
      data={data}
      date="date"
      close="close"
      reversalAmount={2}
      className="h-80 w-full"
    />
  )
}

That renders a Kagi chart where the line only changes direction when price moves by 2 or more points. Thick lines indicate an uptrend, thin lines indicate a downtrend, and time is completely removed from the horizontal axis.

When to Use Kagi Charts

Kagi charts strip away time and volume to show pure price movement. A new segment only forms when price reverses by more than the reversal amount, filtering out minor fluctuations.

Use a Kagi chart when:

• You want to identify significant price trends without time-based noise
• Detecting support and resistance levels from price action alone
• Comparing trend strength across different assets or timeframes
• Your audience understands technical analysis concepts

Don't use a Kagi chart when:

• Time-based context matters for your analysis (use a candlestick or line chart)
• Your audience is unfamiliar with price-based charting techniques
• You need to show volume or open/high/low data alongside price
• Your dataset has fewer than 20 data points (not enough data to form meaningful reversals)

Props Reference

Reversal Amount

The reversal amount is the core parameter of a Kagi chart. It defines the minimum price change required before the line changes direction. Smaller values produce more detail; larger values filter more aggressively.

// Tight reversal: captures smaller moves
<KagiChart
  data={data}
  date="date"
  close="close"
  reversalAmount={1}
/>
 
// Loose reversal: only shows major trend changes
<KagiChart
  data={data}
  date="date"
  close="close"
  reversalAmount={5}
/>

Finding the right reversal amount depends on the asset's volatility. A stock that moves $2 per day might need a $4 reversal to filter noise, while a stock that moves $20 per day might need a $40 reversal.

Fixed vs Percentage Reversals

Fixed reversal (default)

The reversal amount is an absolute price value. A reversal of 4 means the price must move $4 in the opposite direction to create a new segment.

<KagiChart
  data={data}
  date="date"
  close="close"
  reversalAmount={4}
  reversalType="fixed"
/>

Fixed reversals work well for assets with a stable price range. They become less useful when an asset's price changes dramatically over the dataset's timeframe.

Percentage reversal

The reversal amount is a percentage of the current price. A reversal of 2 means the price must move 2% in the opposite direction.

<KagiChart
  data={data}
  date="date"
  close="close"
  reversalAmount={2}
  reversalType="percent"
/>

Percentage reversals adapt automatically to the price level. A 2% reversal on a $100 stock requires a $2 move, while the same 2% on a $500 stock requires a $10 move. This makes percentage reversals better for long-term datasets where the price range shifts significantly.

Directional Coloring

Kagi charts use line thickness and color to communicate trend direction. When the line breaks above a previous high, it becomes thick (yang). When it breaks below a previous low, it becomes thin (yin).

<KagiChart
  data={data}
  date="date"
  close="close"
  reversalAmount={3}
  upColor="#22c55e"
  downColor="#ef4444"
/>

Custom color schemes

// Blue/orange for a neutral feel
<KagiChart
  data={data}
  date="date"
  close="close"
  upColor="#3b82f6"
  downColor="#f97316"
/>
 
// Monochrome with thickness only
<KagiChart
  data={data}
  date="date"
  close="close"
  upColor="#71717a"
  downColor="#71717a"
/>

When using the same color for both directions, the thickness change alone communicates whether the trend is bullish or bearish.

Noise Filtering

The primary advantage of Kagi charts is removing market noise. Because the line only changes direction on significant moves, small fluctuations disappear entirely.

// Compare the same data with different filtering levels
 
// Raw: many reversals, noisy
<KagiChart
  data={dailyPrices}
  date="date"
  close="close"
  reversalAmount={1}
  reversalType="percent"
/>
 
// Filtered: fewer reversals, clearer trends
<KagiChart
  data={dailyPrices}
  date="date"
  close="close"
  reversalAmount={4}
  reversalType="percent"
/>

This makes Kagi charts useful as a secondary view alongside time-based charts. The time-based chart shows what happened; the Kagi chart shows what mattered.

Accessibility

• Screen readers: Each segment is announced with its direction (rising or falling), start price, end price, and magnitude. A summary describes the overall trend and number of reversals.
• Keyboard navigation: Tab to focus the chart, then use left/right arrow keys to traverse reversal points. The tooltip follows the focused segment.
• ARIA roles: The chart has role="img" with a descriptive aria-label. Each segment has role="listitem" with direction and price details.
• Reduced motion: When prefers-reduced-motion is enabled, lines render immediately without drawing animation.
• Color independence: Trend direction is communicated through line thickness (thick for yang, thin for yin) in addition to color, ensuring readability for color-blind users.

Real-World Examples

Stock trend analysis

const appleData = [
  { date: "2024-01-02", close: 185.6 },
  { date: "2024-01-03", close: 184.3 },
  { date: "2024-01-04", close: 181.9 },
  { date: "2024-01-05", close: 181.2 },
  { date: "2024-01-08", close: 185.5 },
  { date: "2024-01-09", close: 186.2 },
  { date: "2024-01-10", close: 188.0 },
  { date: "2024-01-11", close: 186.0 },
  { date: "2024-01-12", close: 185.9 },
  { date: "2024-01-16", close: 183.6 },
  { date: "2024-01-17", close: 187.4 },
  { date: "2024-01-18", close: 189.7 },
]
 
<KagiChart
  data={appleData}
  date="date"
  close="close"
  reversalAmount={3}
  upColor="#22c55e"
  downColor="#ef4444"
  lineWidth={2}
  showValues
  className="h-96 rounded-xl bg-zinc-950 p-4"
/>

Crypto with percentage reversals

const btcDaily = [
  { date: "2024-01-01", close: 42280 },
  { date: "2024-01-02", close: 44960 },
  { date: "2024-01-03", close: 44150 },
  { date: "2024-01-04", close: 43850 },
  { date: "2024-01-05", close: 44020 },
  { date: "2024-01-08", close: 47180 },
  { date: "2024-01-09", close: 46340 },
  { date: "2024-01-10", close: 46100 },
  { date: "2024-01-11", close: 46650 },
  { date: "2024-01-12", close: 42850 },
]
 
<KagiChart
  data={btcDaily}
  date="date"
  close="close"
  reversalAmount={3}
  reversalType="percent"
  upColor="#4ade80"
  downColor="#fb923c"
  lineWidth={3}
  className="h-80 rounded-lg bg-gray-950"
/>

Forex pair trend filter

const eurUsd = [
  { date: "2024-02-01", close: 1.0812 },
  { date: "2024-02-02", close: 1.0788 },
  { date: "2024-02-05", close: 1.0745 },
  { date: "2024-02-06", close: 1.0762 },
  { date: "2024-02-07", close: 1.0778 },
  { date: "2024-02-08", close: 1.0793 },
  { date: "2024-02-09", close: 1.0805 },
  { date: "2024-02-12", close: 1.0770 },
  { date: "2024-02-13", close: 1.0748 },
  { date: "2024-02-14", close: 1.0732 },
]
 
<KagiChart
  data={eurUsd}
  date="date"
  close="close"
  reversalAmount={0.5}
  reversalType="percent"
  upColor="#3b82f6"
  downColor="#a855f7"
  lineWidth={2}
  showValues
  className="h-72"
/>