Charts

Candlestick Chart

Prices over time as candles or OHLC bars — open, high, low and close of each period with the volume under them. Drawn as SVG by the component, rendered on the server and themed by the design tokens.

Part of @tectra-ng/charts (npm install @tectra-ng/charts, also included in tectra-ng).

Features11

API

Theming

Basic

Rising days in green, falling days in red, the volume along the bottom on its own scale. Weekends leave no gaps. Hover a day for its open, high, low, close and volume.

Share price, September and October. Candlestick chart, 1 series, 40 values, from 120.7 to 144.47
Category	Open	High	Low	Close	Volume
Sep 1, 2026	128	130.4	127.36	129.6	2.6K
Sep 2, 2026	129.6	134.61	127.69	132.22	3.6K
Sep 3, 2026	132.22	136.82	131.25	135.61	4.3K
Sep 4, 2026	135.61	141.63	133.78	139.35	4.7K
Sep 7, 2026	139.35	143.13	137.81	141.21	3.1K
Sep 8, 2026	141.21	143.57	139.78	141.78	2K
Sep 9, 2026	141.78	143.95	139.31	141.05	2.2K
Sep 10, 2026	141.05	142.48	138.07	139.22	3.2K
Sep 11, 2026	139.22	141.56	134.8	136.67	3.9K
Sep 14, 2026	136.67	137.64	133.93	134.71	3.4K
Sep 15, 2026	134.71	137.06	131.71	133.59	2.2K
Sep 16, 2026	133.59	134.96	132.24	133.34	1.5K
Sep 17, 2026	133.34	135.99	131.57	133.78	1.7K
Sep 18, 2026	133.78	136.32	132.39	134.58	2.1K
Sep 21, 2026	134.58	136.23	132.7	134.02	1.9K
Sep 22, 2026	134.02	136.28	130.7	132.5	2.8K
Sep 23, 2026	132.5	133.77	129.06	130.08	3.7K
Sep 24, 2026	130.08	132.46	125.11	127.01	4.3K
Sep 25, 2026	127.01	127.88	123.02	123.71	4.6K
Sep 28, 2026	123.71	126.01	120.7	122.54	2.7K
Sep 29, 2026	122.54	124.23	121.31	122.7	1.4K
Sep 30, 2026	122.7	126.28	121.01	124.16	2.6K
Oct 1, 2026	124.16	128.56	122.66	126.69	3.6K
Oct 2, 2026	126.69	131.73	125.22	129.89	4.2K
Oct 5, 2026	129.89	134.56	128.03	132.24	3.6K
Oct 6, 2026	132.24	134.75	131.36	133.65	2.8K
Oct 7, 2026	133.65	136.49	131.73	134.09	1.9K
Oct 8, 2026	134.09	135	133.02	133.75	1.9K
Oct 9, 2026	133.75	136.12	131.06	132.96	2.3K
Oct 12, 2026	132.96	134.94	131.61	133.26	1.5K
Oct 13, 2026	133.26	136.44	131.65	134.43	2.3K
Oct 14, 2026	134.43	138.41	132.83	136.41	3.1K
Oct 15, 2026	136.41	140.65	135.05	138.95	3.6K
Oct 16, 2026	138.95	143.87	137.17	141.64	3.8K
Oct 19, 2026	141.64	143	140.9	142.07	1.9K
Oct 20, 2026	142.07	144.47	139.28	141.2	2.3K
Oct 21, 2026	141.2	142.28	138.2	139.07	3.5K
Oct 22, 2026	139.07	141.4	134.08	135.94	4.4K
Oct 23, 2026	135.94	137.41	131.06	132.24	5K
Oct 26, 2026	132.24	134.13	128.24	129.75	3.5K

Ohlc

variant="ohlc" draws a bar with a tick on the left for the open and on the right for the close. showVolume turns the volume off.

Index, OHLC bars. Candlestick chart, 1 series, 30 values, from 4,197.33 to 4,224.02
Category	Open	High	Low	Close
Sep 1, 2026	4,210	4,216.02	4,208.17	4,213.74
Sep 2, 2026	4,213.74	4,218.91	4,212.47	4,217.32
Sep 3, 2026	4,217.32	4,222.32	4,215.66	4,220.24
Sep 4, 2026	4,220.24	4,224.02	4,218.7	4,222.1
Sep 7, 2026	4,222.1	4,223.53	4,219.12	4,220.27
Sep 8, 2026	4,220.27	4,222.61	4,215.85	4,217.72
Sep 9, 2026	4,217.72	4,218.76	4,214.09	4,214.92
Sep 10, 2026	4,214.92	4,217.32	4,210.42	4,212.34
Sep 11, 2026	4,212.34	4,213.31	4,209.6	4,210.38
Sep 14, 2026	4,210.38	4,213.03	4,208.61	4,210.82
Sep 15, 2026	4,210.82	4,213.36	4,209.43	4,211.62
Sep 16, 2026	4,211.62	4,214.32	4,210.05	4,212.35
Sep 17, 2026	4,212.35	4,214.64	4,210.72	4,212.6
Sep 18, 2026	4,212.6	4,214.25	4,210.72	4,212.04
Sep 21, 2026	4,212.04	4,214.42	4,207.07	4,208.97
Sep 22, 2026	4,208.97	4,209.84	4,204.98	4,205.67
Sep 23, 2026	4,205.67	4,208.06	4,200.72	4,202.63
Sep 24, 2026	4,202.63	4,203.78	4,199.42	4,200.34
Sep 25, 2026	4,200.34	4,202.64	4,197.33	4,199.17
Sep 28, 2026	4,199.17	4,203.57	4,197.67	4,201.7
Sep 29, 2026	4,201.7	4,206.74	4,200.23	4,204.9
Sep 30, 2026	4,204.9	4,210.42	4,203.19	4,208.28
Oct 1, 2026	4,208.28	4,212.84	4,207.08	4,211.35
Oct 2, 2026	4,211.35	4,216.02	4,209.49	4,213.7
Oct 5, 2026	4,213.7	4,214.61	4,212.63	4,213.36
Oct 6, 2026	4,213.36	4,215.73	4,210.67	4,212.57
Oct 7, 2026	4,212.57	4,213.88	4,210.71	4,211.76
Oct 8, 2026	4,211.76	4,214	4,209.56	4,211.35
Oct 9, 2026	4,211.35	4,213.33	4,210	4,211.65
Oct 12, 2026	4,211.65	4,215.89	4,210.29	4,214.19

Short range

Few periods get wide candles. The price axis moves to the left with yAxisPosition; valueFormat formats the prices.

Last two weeks. Candlestick chart, 1 series, 10 values, from 302 to 315
Category	Open	High	Low	Close	Volume
Sep 1, 2026	312	314	311	313	1.7K
Sep 2, 2026	313	315	310	312	1.9K
Sep 3, 2026	312	313	309	310	2.9K
Sep 4, 2026	310	312	306	307	3.6K
Sep 7, 2026	307	308	305	306	3.2K
Sep 8, 2026	306	308	303	304	2.5K
Sep 9, 2026	304	306	303	304	1.7K
Sep 10, 2026	304	307	302	305	1.9K
Sep 11, 2026	305	307	303	305	2.3K
Sep 14, 2026	305	307	303	305	2.2K

Weekly sprint estimates. Candlestick chart, 1 series, 5 values, from 18 to 41
Category	Open	High	Low	Close
Sprint 1	21	34	18	30
Sprint 2	30	32	22	24
Sprint 3	24	36	23	35
Sprint 4	35	41	29	38
Sprint 5	38	39	26	28

Events

candleClick reports the clicked period with its formatted date and the candle.

Click a part. Candlestick chart, 1 series, 4 values, from 39 to 46
Category	Open	High	Low	Close	Volume
Oct 5, 2026	41	44	40	43	900
Oct 6, 2026	43	46	42	42.5	1.4K
Oct 7, 2026	42.5	43	39	39.5	1.8K
Oct 8, 2026	39.5	42	39	41.8	1.1K

Click the chart.

9 lines

<div class="wrap">  <tx-candlestick-chart    [data]="data"    [height]="280"    ariaLabel="Click a part"    (candleClick)="onClick($event)"  />  <p class="log" aria-live="polite">{{ message() }}</p></div>

Loading and empty

loading keeps the size with a skeleton; empty data shows "No data".

No data

12 lines

<div class="wrap">  <div class="controls">    <button txButton label="Load data" variant="outlined" (click)="load()"></button>    <button txButton label="Clear" variant="text" (click)="live.set([])"></button>  </div>  <tx-candlestick-chart    [data]="live()"    [loading]="loading()"    [height]="260"    ariaLabel="Loaded data"  /></div>

Live

New data redraws in place — candles and volume follow.

Shuffled data. Candlestick chart, 1 series, 20 values, from 43.9 to 62.1
Category	Open	High	Low	Close	Volume
Oct 1, 2026	50	53.2	48.9	52	800
Oct 2, 2026	53.7	55.4	52.6	54.2	853
Oct 3, 2026	56.2	57.4	53.4	54.5	906
Oct 4, 2026	56.7	57.9	54.2	55.3	959
Oct 5, 2026	55.3	57.4	54.2	56.2	1K
Oct 6, 2026	52.3	55.5	51.2	54.3	1.1K
Oct 7, 2026	49.1	50.5	48	49.3	1.1K
Oct 8, 2026	46.9	48.1	43.9	45	1.2K
Oct 9, 2026	46.4	47.6	44.2	45.3	1.2K
Oct 10, 2026	48.1	50.6	47	49.4	1.3K
Oct 11, 2026	51.3	54.3	50.2	53.1	1.3K
Oct 12, 2026	55.2	56.4	53.7	54.8	1.4K
Oct 13, 2026	58.4	59.6	55.3	56.4	1.4K
Oct 14, 2026	59.9	61.1	58.1	59.2	1.5K
Oct 15, 2026	59.3	62.1	58.2	60.9	1.5K
Oct 16, 2026	57	59.8	55.9	58.6	1.6K
Oct 17, 2026	53.8	55	51.9	53	1.6K
Oct 18, 2026	50.9	52.1	47.8	48.9	801
Oct 19, 2026	49.5	50.7	48.1	49.2	854
Oct 20, 2026	50.2	53.2	49.1	52	907

6 lines

<div class="wrap">  <div class="controls">    <button txButton label="Shuffle" variant="outlined" (click)="shuffle()"></button>  </div>  <tx-candlestick-chart [data]="live()" [height]="300" ariaLabel="Shuffled data" /></div>

Accessibility

Tab to the chart: ←/→ walk the days and each one is announced with its four prices; Home / End jump to the ends. Screen readers also get a summary with the price range and a hidden table.

Share price. Candlestick chart, 1 series, 12 values, from 45.69 to 65.04
Category	Open	High	Low	Close	Volume
Sep 1, 2026	64	65.04	60.37	61.2	3.7K
Sep 2, 2026	61.2	63.6	56.7	58.62	3.6K
Sep 3, 2026	58.62	59.59	55.88	56.66	3K
Sep 4, 2026	56.66	59.01	53.66	55.54	2.3K
Sep 7, 2026	55.54	58.08	54.15	56.34	2.1K
Sep 8, 2026	56.34	59.04	54.77	57.07	2.1K
Sep 9, 2026	57.07	59.36	55.44	57.32	1.7K
Sep 10, 2026	57.32	58.97	55.44	56.76	2K
Sep 11, 2026	56.76	59.02	53.44	55.24	2.9K
Sep 14, 2026	55.24	56.11	51.25	51.94	4.7K
Sep 15, 2026	51.94	54.33	46.99	48.9	4K
Sep 16, 2026	48.9	50.05	45.69	46.61	3.3K

Design tokens

dt sets the up and down colours, the body width and radius, the wick width and the volume height and opacity of one chart.

Custom colours. Candlestick chart, 1 series, 30 values, from 72.05 to 95.52
Category	Open	High	Low	Close	Volume
Sep 1, 2026	88	93	86.34	90.92	3.8K
Sep 2, 2026	90.92	94.7	89.38	92.78	2.9K
Sep 3, 2026	92.78	95.14	91.35	93.35	1.8K
Sep 4, 2026	93.35	95.52	90.88	92.62	2K
Sep 7, 2026	92.62	93.66	88.99	89.82	3.9K
Sep 8, 2026	89.82	92.22	85.32	87.24	3.8K
Sep 9, 2026	87.24	88.21	84.5	85.28	3.3K
Sep 10, 2026	85.28	87.63	82.28	84.16	2.5K
Sep 11, 2026	84.16	85.53	82.81	83.91	1.8K
Sep 14, 2026	83.91	86.61	82.34	84.64	2.3K
Sep 15, 2026	84.64	86.93	83.01	84.89	1.4K
Sep 16, 2026	84.89	86.54	83.01	84.33	1.8K
Sep 17, 2026	84.33	86.59	81.01	82.81	2.7K
Sep 18, 2026	82.81	84.08	79.37	80.39	3.5K
Sep 21, 2026	80.39	82.78	75.44	77.35	4.2K
Sep 22, 2026	77.35	78.5	74.14	75.06	3.5K
Sep 23, 2026	75.06	77.36	72.05	73.89	2.6K
Sep 24, 2026	73.89	75.58	72.66	74.05	1.7K
Sep 25, 2026	74.05	77.63	72.36	75.51	2.9K
Sep 28, 2026	75.51	81.03	73.8	78.89	4.7K
Sep 29, 2026	78.89	83.45	77.69	81.96	4K
Sep 30, 2026	81.96	86.63	80.1	84.31	3.4K
Oct 1, 2026	84.31	86.82	83.43	85.72	2.6K
Oct 2, 2026	85.72	88.56	83.8	86.16	1.7K
Oct 5, 2026	86.16	87.47	84.3	85.35	2.2K
Oct 6, 2026	85.35	87.59	83.15	84.94	1.9K
Oct 7, 2026	84.94	86.92	83.59	85.24	1.8K
Oct 8, 2026	85.24	88.42	83.63	86.41	2.6K
Oct 9, 2026	86.41	90.39	84.81	88.39	3.4K
Oct 12, 2026	88.39	92.08	87.32	90.75	3.3K

12 lines

<tx-candlestick-chart    [data]="data"    [dt]="{      candlestick: {        upColor: 'var(--tx-sky-500)',        downColor: 'var(--tx-orange-400)',        bodyWidth: '0.5',        volumeHeight: '0.3',      },    }"    ariaLabel="Custom colours"  />

Pass through

pt reaches the parts — candle, wick, body, volume, crosshair, grid, axis, plot, tooltip and more.

Softer volume. Candlestick chart, 1 series, 30 values, from 28.4 to 55.32
Category	Open	High	Low	Close	Volume
Sep 1, 2026	52	53.43	49.02	50.17	2.8K
Sep 2, 2026	50.17	52.51	45.75	47.62	3.5K
Sep 3, 2026	47.62	48.66	43.99	44.82	3.8K
Sep 4, 2026	44.82	47.22	40.32	42.24	3.6K
Sep 7, 2026	42.24	43.61	40.89	41.99	1.6K
Sep 8, 2026	41.99	44.64	40.22	42.43	1.9K
Sep 9, 2026	42.43	44.97	41.04	43.23	2.2K
Sep 10, 2026	43.23	45.93	41.66	43.96	2.2K
Sep 11, 2026	43.96	46.25	42.33	44.21	1.8K
Sep 14, 2026	44.21	45.48	40.77	41.79	3.9K
Sep 15, 2026	41.79	44.17	36.82	38.72	4K
Sep 16, 2026	38.72	39.59	34.73	35.42	4.2K
Sep 17, 2026	35.42	37.81	30.47	32.38	4K
Sep 18, 2026	32.38	33.53	29.17	30.09	3.4K
Sep 21, 2026	30.09	33.67	28.4	31.55	2.8K
Sep 22, 2026	31.55	35.95	30.05	34.08	3.8K
Sep 23, 2026	34.08	39.12	32.61	37.28	4.4K
Sep 24, 2026	37.28	42.8	35.57	40.66	4.6K
Sep 25, 2026	40.66	45.22	39.46	43.73	4.3K
Sep 28, 2026	43.73	46.57	41.81	44.17	2.1K
Sep 29, 2026	44.17	45.08	43.1	43.83	1.5K
Sep 30, 2026	43.83	46.2	41.14	43.04	2K
Oct 1, 2026	43.04	44.35	41.18	42.23	2K
Oct 2, 2026	42.23	44.47	40.03	41.82	1.7K
Oct 5, 2026	41.82	45.8	40.22	43.8	3.2K
Oct 6, 2026	43.8	48.04	42.44	46.34	3.8K
Oct 7, 2026	46.34	51.26	44.56	49.03	4K
Oct 8, 2026	49.03	52.72	47.96	51.39	3.7K
Oct 9, 2026	51.39	55.32	49.5	52.96	3K
Oct 12, 2026	52.96	54.04	49.96	50.83	3.1K

8 lines

<tx-candlestick-chart    [data]="data"    [pt]="{      volume: { style: { 'fill-opacity': '0.15' } },      wick: { style: { 'stroke-width': '2' } },    }"    ariaLabel="Softer volume"  />

Unstyled

unstyled removes the tectra styles: no tokens, no colours by direction, no motion — the geometry, the tooltip and the keyboard stay, ready for your own CSS.

Unstyled chart. Candlestick chart, 1 series, 12 values, from 19.03 to 35.8
Category	Open	High	Low	Close	Volume
Sep 1, 2026	20	24.6	19.03	23.39	4.3K
Sep 2, 2026	23.39	29.41	21.56	27.13	4.6K
Sep 3, 2026	27.13	32.3	25.86	30.71	4.5K
Sep 4, 2026	30.71	35.71	29.05	33.63	3.9K
Sep 7, 2026	33.63	35.8	31.16	32.9	2.1K
Sep 8, 2026	32.9	34.33	29.92	31.07	3.1K
Sep 9, 2026	31.07	33.41	26.65	28.52	3.8K
Sep 10, 2026	28.52	29.56	24.89	25.72	4.1K
Sep 11, 2026	25.72	28.12	21.22	23.14	3.9K
Sep 14, 2026	23.14	24.51	21.79	22.89	1.9K
Sep 15, 2026	22.89	25.54	21.12	23.33	1.6K
Sep 16, 2026	23.33	25.87	21.94	24.13	2K