Candlestick Chart

A candlestick chart: at each place what something opened at and closed at, and the highest and the lowest it reached between the two, as a price does in a day of trading.

import com.pantrixui.components.chart.candlestick.PantrixCandlestickChart

• Candle. Each place has a body from its opening to its close, and a thin wick through the body's middle from the lowest to the highest. A candle that closes over its opening is drawn in the chart's rising colour and one that closes under it in its falling colour: the theme's success and danger, unless colors says otherwise. A candle that closes where it opened is a line across, in the series' own colour (color).
• OHLC bar. kind = CandleKind.Ohlc draws a line in place of the body: from the lowest to the highest, with a tick at the opening on the side lines come from and one at the close on the side they go to. It stays apart where candles would crowd.
• Hollow candle. hollow = true draws the body of a candle that closed higher as its outline alone, with the wick outside the body: the way it went is read without its colour too. A candle that closed lower stays filled.
• A candle's own colour. colorOf gives a row's candle a colour of its own (a day of news); the candle of a row that gives Color.Unspecified stays in the colour of its way.
• Legend. In the legend a series of candles is a sample of two halves: the rising colour and the falling one.
• Volume. A BarSeries with behind = true stands behind the candle at each place, as wide as it: the day's trading volume. It is read by the second axis, and that axis' top keeps the bars low in the chart.
• Four values. A row has all four values, or it has no candle. The wick is no shorter than the body: a highest given under the close is taken for the close.
• Nought. The axis of values does not take nought in by itself: what is read is how the value moves, not how large it is.
• With other series. Candles stand together with lines in a PantrixChart: a moving average, a target.
• Time axis. When the rows' x gives a moment (kotlin.time.Instant), the candles stand where their moments are: a day with no row is a gap, and the axis is marked at round dates, not at the days.
• Automation. The chart is tagged as the PantrixChart it is: Chart_<tagKey>. Its one series has the key candles.

Examples

Three weeks of a price

Three weeks of a share, trading day by trading day. The days that closed higher are in one colour and those that closed lower in the other; the fourteenth day closed where it opened, and stands as a line.

Move the pointer over a candle, or touch the candle: the tooltip writes the four values by their names.

PantrixCandlestickChart(
    data = THREE_WEEKS,
    x = { it.day },
    open = { it.open },
    high = { it.high },
    low = { it.low },
    close = { it.close },
    name = "Price (TL)",
    description = "A share's daily price over three weeks",
    tagKey = "plain"
)

private data class PriceDay(
    val day: String,
    val open: Double,
    val high: Double,
    val low: Double,
    val close: Double
)

private val THREE_WEEKS = listOf(
    PriceDay("1", open = 118.0, high = 121.5, low = 116.8, close = 120.4),
    PriceDay("2", open = 120.4, high = 123.0, low = 119.6, close = 122.1),
    PriceDay("3", open = 122.1, high = 122.9, low = 118.2, close = 119.0),
    PriceDay("4", open = 119.0, high = 120.2, low = 116.9, close = 117.3),
    PriceDay("5", open = 117.3, high = 119.8, low = 117.0, close = 119.5),
    PriceDay("8", open = 119.5, high = 124.6, low = 119.1, close = 124.0),
    PriceDay("9", open = 124.0, high = 126.3, low = 122.8, close = 123.2),
    PriceDay("10", open = 123.2, high = 125.1, low = 121.7, close = 124.8),
    PriceDay("11", open = 124.8, high = 128.9, low = 124.2, close = 128.1),
    PriceDay("12", open = 128.1, high = 129.4, low = 125.6, close = 126.0),
    PriceDay("15", open = 126.0, high = 127.2, low = 123.4, close = 123.9),
    PriceDay("16", open = 123.9, high = 124.5, low = 120.8, close = 121.6),
    PriceDay("17", open = 121.6, high = 123.7, low = 117.1, close = 123.7),
    PriceDay("18", open = 123.7, high = 125.0, low = 122.5, close = 123.7),
    PriceDay("19", open = 123.7, high = 127.8, low = 123.1, close = 127.0)
)

OHLC bars

The same days as OHLC bars: a line from the lowest to the highest, with the opening's tick at its left and the close's at its right. Turn the switch: the bars become candles.

var bars by remember { mutableStateOf(true) }
PantrixSwitchButton(
    checked = bars,
    onCheckedChange = { bars = it },
    label = "OHLC bars",
    tagKey = "candlestick_ohlc"
)
PantrixCandlestickChart(
    data = THREE_WEEKS,
    x = { it.day },
    open = { it.open },
    high = { it.high },
    low = { it.low },
    close = { it.close },
    name = "Price (TL)",
    kind = if (bars) CandleKind.Ohlc else CandleKind.Candle,
    description = "A share's daily price over three weeks, as OHLC bars",
    tagKey = "ohlc"
)

private data class PriceDay(
    val day: String,
    val open: Double,
    val high: Double,
    val low: Double,
    val close: Double
)

private val THREE_WEEKS = listOf(
    PriceDay("1", open = 118.0, high = 121.5, low = 116.8, close = 120.4),
    PriceDay("2", open = 120.4, high = 123.0, low = 119.6, close = 122.1),
    PriceDay("3", open = 122.1, high = 122.9, low = 118.2, close = 119.0),
    PriceDay("4", open = 119.0, high = 120.2, low = 116.9, close = 117.3),
    PriceDay("5", open = 117.3, high = 119.8, low = 117.0, close = 119.5),
    PriceDay("8", open = 119.5, high = 124.6, low = 119.1, close = 124.0),
    PriceDay("9", open = 124.0, high = 126.3, low = 122.8, close = 123.2),
    PriceDay("10", open = 123.2, high = 125.1, low = 121.7, close = 124.8),
    PriceDay("11", open = 124.8, high = 128.9, low = 124.2, close = 128.1),
    PriceDay("12", open = 128.1, high = 129.4, low = 125.6, close = 126.0),
    PriceDay("15", open = 126.0, high = 127.2, low = 123.4, close = 123.9),
    PriceDay("16", open = 123.9, high = 124.5, low = 120.8, close = 121.6),
    PriceDay("17", open = 121.6, high = 123.7, low = 117.1, close = 123.7),
    PriceDay("18", open = 123.7, high = 125.0, low = 122.5, close = 123.7),
    PriceDay("19", open = 123.7, high = 127.8, low = 123.1, close = 127.0)
)

Your own colours and a level

The colours of the two ways come from the chart's colours (the rising and falling fields of ChartColors), and the colour of a candle that closes where it opened from the series itself (color). And the level the price came back to three times: a reference line.

Colour should not carry meaning alone: which way a candle went is read from the opening and the close in the tooltip too.

val theme = PantrixTheme.colors
PantrixCandlestickChart(
    data = THREE_WEEKS,
    x = { it.day },
    open = { it.open },
    high = { it.high },
    low = { it.low },
    close = { it.close },
    name = "Price (TL)",
    color = theme.neutral.color,
    marks = listOf(ChartReferenceLine(y = 117, label = "Support")),
    colors = ChartColors(rising = theme.info.color, falling = theme.warning.color),
    description = "A share's daily price over three weeks, in its own colours and with a support level",
    tagKey = "own_colors"
)

private data class PriceDay(
    val day: String,
    val open: Double,
    val high: Double,
    val low: Double,
    val close: Double
)

private val THREE_WEEKS = listOf(
    PriceDay("1", open = 118.0, high = 121.5, low = 116.8, close = 120.4),
    PriceDay("2", open = 120.4, high = 123.0, low = 119.6, close = 122.1),
    PriceDay("3", open = 122.1, high = 122.9, low = 118.2, close = 119.0),
    PriceDay("4", open = 119.0, high = 120.2, low = 116.9, close = 117.3),
    PriceDay("5", open = 117.3, high = 119.8, low = 117.0, close = 119.5),
    PriceDay("8", open = 119.5, high = 124.6, low = 119.1, close = 124.0),
    PriceDay("9", open = 124.0, high = 126.3, low = 122.8, close = 123.2),
    PriceDay("10", open = 123.2, high = 125.1, low = 121.7, close = 124.8),
    PriceDay("11", open = 124.8, high = 128.9, low = 124.2, close = 128.1),
    PriceDay("12", open = 128.1, high = 129.4, low = 125.6, close = 126.0),
    PriceDay("15", open = 126.0, high = 127.2, low = 123.4, close = 123.9),
    PriceDay("16", open = 123.9, high = 124.5, low = 120.8, close = 121.6),
    PriceDay("17", open = 121.6, high = 123.7, low = 117.1, close = 123.7),
    PriceDay("18", open = 123.7, high = 125.0, low = 122.5, close = 123.7),
    PriceDay("19", open = 123.7, high = 127.8, low = 123.1, close = 127.0)
)

Candles and an average line

Candles are one of the series of a PantrixChart, and stand together with lines: here the three-day average of the closes, as a dashed line. Since there are two series the legend comes by itself; the tooltip writes the two together.

val averages = remember { averagesOf(THREE_WEEKS, days = 3) }
PantrixChart(
    series = listOf(
        CandlestickSeries(
            key = "price",
            name = "Price (TL)",
            data = THREE_WEEKS,
            x = { it.day },
            open = { it.open },
            high = { it.high },
            low = { it.low },
            close = { it.close }
        ),
        LineSeries(
            key = "average",
            name = "Three-day average",
            data = averages,
            x = { it.first },
            y = { it.second },
            dash = ChartDash.Dashed
        )
    ),
    description = "A share's daily price and the three-day average of its closes",
    tagKey = "average"
)

private data class PriceDay(
    val day: String,
    val open: Double,
    val high: Double,
    val low: Double,
    val close: Double
)

private val THREE_WEEKS = listOf(
    PriceDay("1", open = 118.0, high = 121.5, low = 116.8, close = 120.4),
    PriceDay("2", open = 120.4, high = 123.0, low = 119.6, close = 122.1),
    PriceDay("3", open = 122.1, high = 122.9, low = 118.2, close = 119.0),
    PriceDay("4", open = 119.0, high = 120.2, low = 116.9, close = 117.3),
    PriceDay("5", open = 117.3, high = 119.8, low = 117.0, close = 119.5),
    PriceDay("8", open = 119.5, high = 124.6, low = 119.1, close = 124.0),
    PriceDay("9", open = 124.0, high = 126.3, low = 122.8, close = 123.2),
    PriceDay("10", open = 123.2, high = 125.1, low = 121.7, close = 124.8),
    PriceDay("11", open = 124.8, high = 128.9, low = 124.2, close = 128.1),
    PriceDay("12", open = 128.1, high = 129.4, low = 125.6, close = 126.0),
    PriceDay("15", open = 126.0, high = 127.2, low = 123.4, close = 123.9),
    PriceDay("16", open = 123.9, high = 124.5, low = 120.8, close = 121.6),
    PriceDay("17", open = 121.6, high = 123.7, low = 117.1, close = 123.7),
    PriceDay("18", open = 123.7, high = 125.0, low = 122.5, close = 123.7),
    PriceDay("19", open = 123.7, high = 127.8, low = 123.1, close = 127.0)
)

private fun averagesOf(
    prices: List<PriceDay>,
    days: Int
): List<Pair<String, Double?>> = prices.mapIndexed { index, price ->
    val last = prices.subList((index - days + 1).coerceAtLeast(0), index + 1)
    price.day to last.takeIf { it.size == days }?.map { it.close }?.average()
}

Hollow candles and volume

The day's trading volume behind the candles: a BarSeries with behind = true stands behind the candle at each place, as wide as it, though it is given after the candles. It is read by the second axis (axis = ChartYAxis.Second); that axis goes up to three times the largest volume, and the bars stay in the lower third of the chart.

The candles are hollow (hollow): the body of a day that closed higher is its outline alone. The candle of the 11th, a day of news, is in a colour of its own (colorOf). In the legend the series of candles is a sample of two halves: the rising colour and the falling one.

var hollow by remember { mutableStateOf(true) }
val theme = PantrixTheme.colors
PantrixSwitchButton(
    checked = hollow,
    onCheckedChange = { hollow = it },
    label = "Hollow candles",
    tagKey = "candles_hollow"
)
PantrixChart(
    series = listOf(
        CandlestickSeries(
            key = "price",
            name = "Price (TL)",
            data = THREE_WEEKS,
            x = { it.day },
            open = { it.open },
            high = { it.high },
            low = { it.low },
            close = { it.close },
            hollow = hollow,
            colorOf = { if (it.day == NEWS_DAY) theme.warning.color else Color.Unspecified }
        ),
        BarSeries(
            key = "volume",
            name = "Volume (thousand lots)",
            data = THREE_WEEKS.zip(VOLUMES),
            x = { it.first.day },
            y = { it.second },
            color = theme.neutral.color.copy(alpha = VOLUME_TINT),
            behind = true,
            axis = ChartYAxis.Second
        )
    ),
    secondYAxis = ChartAxis(labels = false, max = VOLUMES.max() * 3.0),
    description = "A share's daily price and trading volume over three weeks",
    tagKey = "volume"
)

private data class PriceDay(
    val day: String,
    val open: Double,
    val high: Double,
    val low: Double,
    val close: Double
)

private val THREE_WEEKS = listOf(
    PriceDay("1", open = 118.0, high = 121.5, low = 116.8, close = 120.4),
    PriceDay("2", open = 120.4, high = 123.0, low = 119.6, close = 122.1),
    PriceDay("3", open = 122.1, high = 122.9, low = 118.2, close = 119.0),
    PriceDay("4", open = 119.0, high = 120.2, low = 116.9, close = 117.3),
    PriceDay("5", open = 117.3, high = 119.8, low = 117.0, close = 119.5),
    PriceDay("8", open = 119.5, high = 124.6, low = 119.1, close = 124.0),
    PriceDay("9", open = 124.0, high = 126.3, low = 122.8, close = 123.2),
    PriceDay("10", open = 123.2, high = 125.1, low = 121.7, close = 124.8),
    PriceDay("11", open = 124.8, high = 128.9, low = 124.2, close = 128.1),
    PriceDay("12", open = 128.1, high = 129.4, low = 125.6, close = 126.0),
    PriceDay("15", open = 126.0, high = 127.2, low = 123.4, close = 123.9),
    PriceDay("16", open = 123.9, high = 124.5, low = 120.8, close = 121.6),
    PriceDay("17", open = 121.6, high = 123.7, low = 117.1, close = 123.7),
    PriceDay("18", open = 123.7, high = 125.0, low = 122.5, close = 123.7),
    PriceDay("19", open = 123.7, high = 127.8, low = 123.1, close = 127.0)
)

private val VOLUMES = listOf(820, 940, 1210, 1080, 760, 1430, 990, 870, 2650, 1320, 1040, 1180, 1510, 690, 1120)

private const val NEWS_DAY = "11"

private const val VOLUME_TINT = 0.32f

Days on the calendar

The same three weeks, this time with each day as a moment: the first three weeks of June 2026. The candles stand where they are on the calendar, the two weekends show as gaps, and the axis is marked at the start of each week.

Turn the switch on (ChartTime(gapless = true)): the weekends, when the market is closed, close up, the candles stand side by side at even steps, and the axis is still marked at days or weeks, at the first candle of each.

The days are days of UTC, so the axis is read by UTC too (the offset of ChartTime): whatever the device's clock, a candle stands on its own day.

var gapless by remember { mutableStateOf(false) }
PantrixSwitchButton(
    checked = gapless,
    onCheckedChange = { gapless = it },
    label = "Without weekends",
    tagKey = "candles_gapless"
)
PantrixCandlestickChart(
    data = THREE_WEEKS,
    x = { dayOf(it) },
    open = { it.open },
    high = { it.high },
    low = { it.low },
    close = { it.close },
    name = "Price (TL)",
    xAxis = ChartAxis(time = ChartTime(offset = { Duration.ZERO }, gapless = gapless)),
    description = "A share's daily price in the first three weeks of June 2026, on the days of the calendar",
    tagKey = "in_time"
)

private data class PriceDay(
    val day: String,
    val open: Double,
    val high: Double,
    val low: Double,
    val close: Double
)

private val THREE_WEEKS = listOf(
    PriceDay("1", open = 118.0, high = 121.5, low = 116.8, close = 120.4),
    PriceDay("2", open = 120.4, high = 123.0, low = 119.6, close = 122.1),
    PriceDay("3", open = 122.1, high = 122.9, low = 118.2, close = 119.0),
    PriceDay("4", open = 119.0, high = 120.2, low = 116.9, close = 117.3),
    PriceDay("5", open = 117.3, high = 119.8, low = 117.0, close = 119.5),
    PriceDay("8", open = 119.5, high = 124.6, low = 119.1, close = 124.0),
    PriceDay("9", open = 124.0, high = 126.3, low = 122.8, close = 123.2),
    PriceDay("10", open = 123.2, high = 125.1, low = 121.7, close = 124.8),
    PriceDay("11", open = 124.8, high = 128.9, low = 124.2, close = 128.1),
    PriceDay("12", open = 128.1, high = 129.4, low = 125.6, close = 126.0),
    PriceDay("15", open = 126.0, high = 127.2, low = 123.4, close = 123.9),
    PriceDay("16", open = 123.9, high = 124.5, low = 120.8, close = 121.6),
    PriceDay("17", open = 121.6, high = 123.7, low = 117.1, close = 123.7),
    PriceDay("18", open = 123.7, high = 125.0, low = 122.5, close = 123.7),
    PriceDay("19", open = 123.7, high = 127.8, low = 123.1, close = 127.0)
)

private fun dayOf(price: PriceDay): Instant = Instant.parse("2026-06-${price.day.padStart(2, '0')}T00:00:00Z")

Pressing a candle

A press is handed the candle: the point's value is the close, its from the opening, and its high and low the two ends of the wick. Press a candle: the line below writes how much the day moved and how it closed.

var pressed by remember { mutableStateOf<String?>(null) }
val strings = PantrixTheme.strings
PantrixCandlestickChart(
    data = THREE_WEEKS,
    x = { it.day },
    open = { it.open },
    high = { it.high },
    low = { it.low },
    close = { it.close },
    name = "Price (TL)",
    onSelect = { point ->
        val open = point.from ?: point.value
        val swing = (point.high ?: point.value) - (point.low ?: point.value)
        val change = strings.decimal(point.value - open)
        pressed = "Day ${point.label}: moved ${strings.decimal(swing)} TL, $change TL at the close"
    },
    description = "A share's daily price over three weeks",
    tagKey = "press"
)
PantrixText(text = pressed ?: "Press a candle")

private data class PriceDay(
    val day: String,
    val open: Double,
    val high: Double,
    val low: Double,
    val close: Double
)

private val THREE_WEEKS = listOf(
    PriceDay("1", open = 118.0, high = 121.5, low = 116.8, close = 120.4),
    PriceDay("2", open = 120.4, high = 123.0, low = 119.6, close = 122.1),
    PriceDay("3", open = 122.1, high = 122.9, low = 118.2, close = 119.0),
    PriceDay("4", open = 119.0, high = 120.2, low = 116.9, close = 117.3),
    PriceDay("5", open = 117.3, high = 119.8, low = 117.0, close = 119.5),
    PriceDay("8", open = 119.5, high = 124.6, low = 119.1, close = 124.0),
    PriceDay("9", open = 124.0, high = 126.3, low = 122.8, close = 123.2),
    PriceDay("10", open = 123.2, high = 125.1, low = 121.7, close = 124.8),
    PriceDay("11", open = 124.8, high = 128.9, low = 124.2, close = 128.1),
    PriceDay("12", open = 128.1, high = 129.4, low = 125.6, close = 126.0),
    PriceDay("15", open = 126.0, high = 127.2, low = 123.4, close = 123.9),
    PriceDay("16", open = 123.9, high = 124.5, low = 120.8, close = 121.6),
    PriceDay("17", open = 121.6, high = 123.7, low = 117.1, close = 123.7),
    PriceDay("18", open = 123.7, high = 125.0, low = 122.5, close = 123.7),
    PriceDay("19", open = 123.7, high = 127.8, low = 123.1, close = 127.0)
)

API

data

A candlestick chart: at each place what something opened at and closed at, and the highest and the lowest it reached between the two, as a price does in a day of trading.

ChartStyle

A chart's geometry: how tall it is where nothing says, how thick its lines and how large its marks are, and the room between its parts; and whether its fills have textures besides their colours.

ChartColors

What a chart is painted with, for a chart that does not take the theme's colours: a colour that is set is used, and one that is left out stays the theme's.

Accessibility

• Tooltip and screen reader. A candle is written as its four values, each by its name in the theme's language: open, high, low, close. A press is handed the close in the point's value, the opening in its from, and the two ends of the wick in its high and low.