Indicator Chart

Price, RSI and MACD stacked on one time axis with a single crosshair that reports all three panes at once.

Price · RSI · MACD

@spectrumui/indicator-chart

SOLSolana

$245.85−2.27%

Aug 21RSI 54.5MACD 1.97Signal 2.85

SOL Solana — close, RSI and MACD by date
Date	Close	RSI	MACD
May 24	$251.55	66.6	11.21
May 25	$252.02	66.9	10.85
May 26	$253.06	67.6	10.53
May 27	$250.89	64.6	9.99
May 28	$254.08	66.9	9.70
May 29	$251.26	63.0	9.15
May 30	$248.29	59.0	8.37
May 31	$252.41	62.5	7.99
Jun 1	$250.94	60.5	7.49
Jun 2	$248.49	57.3	6.81
Jun 3	$247.25	55.6	6.10
Jun 4	$244.86	52.5	5.29
Jun 5	$242.15	49.1	4.38
Jun 6	$240.08	46.7	3.45
Jun 7	$240.14	46.7	2.68
Jun 8	$240.73	47.6	2.10
Jun 9	$239.84	46.4	1.55
Jun 10	$240.83	48.0	1.18
Jun 11	$242.05	50.0	0.97
Jun 12	$245.37	55.0	1.07
Jun 13	$244.51	53.5	1.06
Jun 14	$242.11	49.4	0.85
Jun 15	$247.91	57.8	1.14
Jun 16	$246.89	56.0	1.27
Jun 17	$247.42	56.8	1.40
Jun 18	$249.74	59.9	1.67
Jun 19	$244.73	51.2	1.46
Jun 20	$238.88	43.3	0.82
Jun 21	$239.62	44.5	0.36
Jun 22	$242.75	49.3	0.25
Jun 23	$245.00	52.4	0.34
Jun 24	$243.76	50.5	0.31
Jun 25	$237.64	42.5	-0.21
Jun 26	$232.84	37.5	-0.99
Jun 27	$233.09	37.9	-1.58
Jun 28	$231.56	36.3	-2.14
Jun 29	$234.27	41.0	-2.34
Jun 30	$234.05	40.7	-2.49
Jul 1	$234.58	41.7	-2.53
Jul 2	$234.89	42.3	-2.51
Jul 3	$232.08	38.5	-2.69
Jul 4	$229.87	35.7	-2.98
Jul 5	$225.68	31.2	-3.51
Jul 6	$229.07	38.0	-3.61
Jul 7	$233.48	45.6	-3.29
Jul 8	$231.40	43.0	-3.18
Jul 9	$226.89	37.8	-3.41
Jul 10	$222.58	33.6	-3.90
Jul 11	$221.24	32.4	-4.34
Jul 12	$218.38	30.0	-4.87
Jul 13	$214.29	26.9	-5.55
Jul 14	$216.39	30.8	-5.85
Jul 15	$214.14	29.0	-6.20
Jul 16	$219.12	37.8	-6.01
Jul 17	$223.75	44.6	-5.42
Jul 18	$223.60	44.5	-4.91
Jul 19	$228.92	51.6	-4.03
Jul 20	$229.49	52.3	-3.25
Jul 21	$233.49	57.0	-2.28
Jul 22	$232.56	55.6	-1.57
Jul 23	$237.67	61.1	-0.59
Jul 24	$233.75	55.4	-0.12
Jul 25	$231.99	53.0	0.10
Jul 26	$228.62	48.7	0.01
Jul 27	$232.01	52.9	0.20
Jul 28	$234.57	55.8	0.56
Jul 29	$241.40	62.5	1.37
Jul 30	$243.67	64.4	2.18
Jul 31	$241.86	61.7	2.64
Aug 1	$245.40	64.8	3.26
Aug 2	$244.67	63.7	3.64
Aug 3	$248.49	67.0	4.21
Aug 4	$249.85	68.1	4.71
Aug 5	$247.22	63.6	4.84
Aug 6	$246.33	62.1	4.82
Aug 7	$245.68	61.0	4.69
Aug 8	$245.21	60.2	4.51
Aug 9	$246.65	61.9	4.42
Aug 10	$246.16	60.9	4.27
Aug 11	$242.34	53.8	3.79
Aug 12	$246.84	59.8	3.73
Aug 13	$250.26	63.6	3.92
Aug 14	$248.84	61.0	3.91
Aug 15	$245.85	55.8	3.61
Aug 16	$249.16	59.9	3.61
Aug 17	$246.34	55.2	3.34
Aug 18	$243.18	50.5	2.83
Aug 19	$242.97	50.2	2.39
Aug 20	$243.68	51.2	2.07
Aug 21	$245.85	54.5	1.97

Equities

AAPLApple Inc.

$327.58+26.52%

Aug 21RSI 64.0MACD 4.00Signal 5.04

AAPL Apple Inc. — close, RSI and MACD by date
Date	Close	RSI	MACD
May 24	$258.92	46.3	0.50
May 25	$256.21	41.8	0.05
May 26	$256.17	41.7	-0.30
May 27	$256.26	41.9	-0.57
May 28	$257.13	44.1	-0.70
May 29	$260.55	51.7	-0.53
May 30	$260.83	52.3	-0.36
May 31	$260.20	50.8	-0.28
Jun 1	$258.19	46.4	-0.37
Jun 2	$260.15	50.9	-0.28
Jun 3	$264.98	59.9	0.18
Jun 4	$266.93	62.8	0.69
Jun 5	$265.84	60.1	1.00
Jun 6	$261.65	51.2	0.89
Jun 7	$258.68	45.9	0.56
Jun 8	$254.65	39.9	-0.02
Jun 9	$259.64	48.8	-0.08
Jun 10	$263.23	54.1	0.16
Jun 11	$264.58	55.9	0.45
Jun 12	$264.03	55.0	0.63
Jun 13	$262.14	51.7	0.62
Jun 14	$260.33	48.7	0.45
Jun 15	$263.00	53.0	0.53
Jun 16	$264.88	55.8	0.74
Jun 17	$264.77	55.6	0.88
Jun 18	$261.75	50.0	0.74
Jun 19	$261.87	50.2	0.64
Jun 20	$264.86	55.4	0.78
Jun 21	$261.44	49.1	0.62
Jun 22	$257.79	43.5	0.19
Jun 23	$261.64	50.0	0.16
Jun 24	$266.13	56.3	0.49
Jun 25	$265.35	55.0	0.68
Jun 26	$264.67	53.9	0.77
Jun 27	$263.47	51.8	0.74
Jun 28	$263.44	51.7	0.70
Jun 29	$266.45	56.6	0.90
Jun 30	$271.67	63.5	1.47
Jul 1	$274.42	66.5	2.11
Jul 2	$276.53	68.7	2.76
Jul 3	$282.90	74.1	3.75
Jul 4	$285.03	75.6	4.65
Jul 5	$283.65	72.6	5.19
Jul 6	$282.64	70.5	5.47
Jul 7	$288.68	75.2	6.11
Jul 8	$288.88	75.4	6.56
Jul 9	$290.62	76.6	6.98
Jul 10	$295.18	79.6	7.59
Jul 11	$299.03	81.7	8.29
Jul 12	$304.49	84.2	9.18
Jul 13	$300.47	76.0	9.45
Jul 14	$297.74	71.0	9.34
Jul 15	$301.86	73.8	9.47
Jul 16	$305.48	76.0	9.76
Jul 17	$309.10	78.0	10.16
Jul 18	$304.06	69.3	9.95
Jul 19	$307.24	71.5	9.93
Jul 20	$310.32	73.4	10.05
Jul 21	$313.85	75.5	10.31
Jul 22	$314.61	75.9	10.46
Jul 23	$315.05	76.2	10.49
Jul 24	$311.72	70.0	10.13
Jul 25	$315.18	72.5	10.00
Jul 26	$312.72	68.1	9.60
Jul 27	$314.29	69.4	9.29
Jul 28	$312.91	66.9	8.84
Jul 29	$312.50	66.1	8.35
Jul 30	$313.52	67.1	7.96
Jul 31	$316.80	70.2	7.82
Aug 1	$318.40	71.6	7.75
Aug 2	$320.26	73.2	7.75
Aug 3	$321.32	74.0	7.75
Aug 4	$322.51	75.0	7.76
Aug 5	$322.86	75.3	7.70
Aug 6	$325.08	77.2	7.75
Aug 7	$326.42	78.3	7.80
Aug 8	$327.33	79.0	7.83
Aug 9	$325.62	74.0	7.62
Aug 10	$324.87	71.9	7.32
Aug 11	$326.15	73.3	7.09
Aug 12	$326.62	73.8	6.88
Aug 13	$324.72	68.1	6.48
Aug 14	$326.90	70.9	6.26
Aug 15	$325.69	67.3	5.93
Aug 16	$323.30	60.8	5.41
Aug 17	$325.82	64.7	5.14
Aug 18	$324.12	60.4	4.73
Aug 19	$321.96	55.3	4.19
Aug 20	$326.04	61.8	4.04
Aug 21	$327.58	64.0	4.00

Manual installation

Prefer to copy by hand? Open the Code tab on any example above and switch to the file you need — every source file is there, not just the demo. Drop them in your project like this:

chart-engine.tsxcomponents/spectrumui/charts/chart-engine.tsx
indicator-chart.tsxcomponents/spectrumui/charts/indicator-chart.tsx

There is nothing to install — this chart draws its own SVG and imports only @/lib/utils.

Usage

import { IndicatorChart } from '@/components/spectrumui/charts/indicator-chart';

<IndicatorChart data={candles} symbol="SOL" />

RSI and MACD are computed from the full series, then sliced — so changing range never restates them.
rsi() and macd() are exported if you want the numbers without the chart.

Props

Prop	Type	Default	Description
`data`	`Candle[]`	`SOL_MARKET`	OHLC series. RSI and MACD are computed from it.
`symbol`	`string`	`'SOL'`	Ticker shown in the header.
`name`	`string`	`'Solana'`	Long name beside the ticker.
`ranges`	`MarketRange[]`	`MARKET_RANGES`	Range selector options.
`defaultRange`	`string`	`'3M'`	Which range is selected on mount.
`height`	`number`	-	Plot height in pixels. The header sits above it, so the card is taller than this.
`status`	`'ready' \| 'loading' \| 'empty' \| 'error'`	`'ready'`	Which state to render. All four reserve the same frame height, so nothing shifts when data lands.
`onRetry`	`() => void`	-	Called by the retry button in the error state. Omit it and no button is shown.
`className`	`string`	-	Merged onto the root element.