✨ Announcing our seed funding led by Lux Capital! Read more about it on our blog ✨
[ Learn ]
[ Concepts ]
[ Reference ]
Candlestick
Candlestick is a wrapper component that renders a candlestick graph.
Data
Candlestick accepts a data prop, which is an array of dictionaries with x, open, close, high, and low keys. You can contruct your own data as input, or use the
rx.data helper function to generate a data array from a x, open, close, high, and low lists.data = rx.data(
"candlestick",
x=[1, 2, 3, 4, 5],
open=[1, 3, 6, 7, 15],
close=[1, 2, 3, 4, 10],
high=[3, 5, 6, 7, 16],
low=[1, 2, 3, 4, 10],
)Which will render as:
data = [
{"x": 1, "open": 1, "close": 1, "high": 3, "low": 1},
{"x": 2, "open": 3, "close": 2, "high": 5, "low": 2},
{"x": 3, "open": 6, "close": 3, "high": 6, "low": 3},
{"x": 4, "open": 7, "close": 4, "high": 7, "low": 4},
{
"x": 5,
"open": 15,
"close": 10,
"high": 16,
"low": 10,
},
]Examples
The following example shows a basic
rx.candlestick component.rx.chart(
rx.candlestick(
data=rx.data(
"candlestick",
x=[1, 2, 3, 4, 5],
open=[1, 3, 6, 7, 15],
close=[1, 2, 3, 4, 10],
high=[3, 5, 6, 7, 16],
low=[1, 2, 3, 4, 10],
),
)
)You can also style the candlestick graph by passing in a candle_colors prop.
rx.chart(
rx.candlestick(
data=rx.data(
"candlestick",
x=[1, 2, 3, 4, 5],
open=[1, 3, 6, 7, 15],
close=[1, 11, 3, 4, 10],
high=[3, 14, 6, 7, 16],
low=[1, 2, 3, 4, 10],
),
candle_colors={
"positive": "green",
"negative": "red",
},
candle_width=10.0,
candle_ratio=0.5,
)
)Candlestick
Display a victory candlestick.
Base Event Triggers
Copyright © 2023 Pynecone, Inc.