Candlestick Chart

Bir mum grafiği: her yerde bir şeyin neyle açıldığı ve neyle kapandığı, bir de ikisinin arasında vardığı en yüksek ve en düşük değer; bir fiyatın bir işlem gününde yaptığı gibi.

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

• Mum. Her yerin açılışından kapanışına bir gövdesi, gövdenin ortasından en düşükten en yükseğe giden ince bir fitili vardır. Açılışının üstünde kapanan mum grafiğin rising renginde, altında kapanan falling renginde çizilir: temanın success ve danger renkleri, colors başka söylemedikçe. Açıldığı yerde kapanan mum bir yatay çizgidir ve serinin kendi rengindedir (color).
• OHLC çubuğu. kind = CandleKind.Ohlc gövde yerine bir çizgi çizer: en düşükten en yükseğe, açılışta satırların geldiği yana, kapanışta gittiği yana birer çentikle. Mumların sıkıştığı yerde ayrık kalır.
• İçi boş mum. hollow = true yukarı kapanan mumun gövdesini yalnız çerçevesiyle çizer, fitil gövdenin dışında kalır: yön renksiz de okunur. Aşağı kapanan mum dolu kalır.
• Mumun kendi rengi. colorOf bir satırın mumuna kendi rengini verir (bir haber günü); Color.Unspecified veren satırın mumu yönünün renginde kalır.
• Lejant. Lejantta mum serisi iki yarılı bir örnektir: yükselişin ve düşüşün rengi.
• Hacim. behind = true olan bir BarSeries her yerde mumun arkasında, onun genişliğinde durur: günün işlem hacmi. İkinci eksene göre okunur ve o eksenin üst sınırı çubukları grafiğin altında tutar.
• Dört değer. Bir satırın dört değeri de vardır ya da mumu yoktur. Fitil gövdeden kısa olmaz: kapanışın altında verilen bir en yüksek, kapanış sayılır.
• Sıfır. Değer ekseni sıfırı kendiliğinden içine almaz: okunan, değerin büyüklüğü değil hareketidir.
• Başka serilerle. Mumlar bir PantrixChart'ta çizgilerle birlikte durur: bir hareketli ortalama, bir hedef.
• Zaman ekseni. Satırların x'i bir an (kotlin.time.Instant) verdiğinde mumlar anlarının olduğu yerde durur: satırı olmayan gün bir boşluktur, eksen de günlere değil yuvarlak tarihlere işaretlenir.
• Otomasyon. Grafik, olduğu PantrixChart gibi etiketlenir: Chart_<tagKey>. Tek serisinin anahtarı candles'tır.

Örnekler

Bir fiyatın üç haftası

Bir hissenin üç haftası, işlem günü işlem günü. Yukarı kapanan günler bir renkte, aşağı kapananlar öbüründe; on dördüncü gün açıldığı yerde kapanmış ve bir çizgi olarak duruyor.

İmleci bir mumun üstüne getir ya da muma dokun: tooltip dört değeri adlarıyla yazar.

PantrixCandlestickChart(
    data = THREE_WEEKS,
    x = { it.day },
    open = { it.open },
    high = { it.high },
    low = { it.low },
    close = { it.close },
    name = "Fiyat (TL)",
    description = "Bir hissenin üç haftalık günlük fiyatı",
    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 çubukları

Aynı günler OHLC çubuklarıyla: en düşükten en yükseğe bir çizgi, solunda açılışın, sağında kapanışın çentiği. Anahtarı çevir: çubuklar muma döner.

var bars by remember { mutableStateOf(true) }
PantrixSwitchButton(
    checked = bars,
    onCheckedChange = { bars = it },
    label = "OHLC çubukları",
    tagKey = "candlestick_ohlc"
)
PantrixCandlestickChart(
    data = THREE_WEEKS,
    x = { it.day },
    open = { it.open },
    high = { it.high },
    low = { it.low },
    close = { it.close },
    name = "Fiyat (TL)",
    kind = if (bars) CandleKind.Ohlc else CandleKind.Candle,
    description = "Bir hissenin üç haftalık günlük fiyatı, OHLC çubuklarıyla",
    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)
)

Kendi renklerin ve bir seviye

İki yönün rengi grafiğin renklerinden gelir (ChartColors'ın rising ve falling alanları), açıldığı yerde kapanan mumun rengi serinin kendisinden (color). Bir de fiyatın üç kez dönüp geldiği seviye: bir referans çizgisi.

Renk tek başına anlam taşımamalı: bir mumun yönü tooltip'teki açılış ve kapanış değerlerinden de okunur.

val theme = PantrixTheme.colors
PantrixCandlestickChart(
    data = THREE_WEEKS,
    x = { it.day },
    open = { it.open },
    high = { it.high },
    low = { it.low },
    close = { it.close },
    name = "Fiyat (TL)",
    color = theme.neutral.color,
    marks = listOf(ChartReferenceLine(y = 117, label = "Destek")),
    colors = ChartColors(rising = theme.info.color, falling = theme.warning.color),
    description = "Bir hissenin üç haftalık günlük fiyatı, kendi renkleriyle ve bir destek seviyesiyle",
    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)
)

Mumlar ve bir ortalama çizgisi

Mumlar bir PantrixChart'ın serilerinden biridir ve çizgilerle birlikte durur: burada kapanışların üç günlük ortalaması, kesikli bir çizgi olarak. İki seri olduğu için lejant kendiliğinden gelir; tooltip ikisini birlikte yazar.

val averages = remember { averagesOf(THREE_WEEKS, days = 3) }
PantrixChart(
    series = listOf(
        CandlestickSeries(
            key = "price",
            name = "Fiyat (TL)",
            data = THREE_WEEKS,
            x = { it.day },
            open = { it.open },
            high = { it.high },
            low = { it.low },
            close = { it.close }
        ),
        LineSeries(
            key = "average",
            name = "Üç günlük ortalama",
            data = averages,
            x = { it.first },
            y = { it.second },
            dash = ChartDash.Dashed
        )
    ),
    description = "Bir hissenin günlük fiyatı ve kapanışlarının üç günlük ortalaması",
    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()
}

İçi boş mumlar ve hacim

Mumların arkasında günün işlem hacmi: behind = true olan bir BarSeries her yerde mumun arkasında, onun genişliğinde durur, mumlardan sonra verildiği hâlde. İkinci eksene göre okunur (axis = ChartYAxis.Second); o eksen hacmin en çoğunun üç katına kadar gider, çubuklar da grafiğin alt üçte birinde kalır.

Mumlar içi boş (hollow): yukarı kapanan günün gövdesi yalnız çerçevesidir. Bir haber günü olan 11'inin mumu kendi renginde (colorOf). Lejantta mum serisi iki yarılı bir örnektir: yükselişin ve düşüşün rengi.

var hollow by remember { mutableStateOf(true) }
val theme = PantrixTheme.colors
PantrixSwitchButton(
    checked = hollow,
    onCheckedChange = { hollow = it },
    label = "İçi boş mumlar",
    tagKey = "candles_hollow"
)
PantrixChart(
    series = listOf(
        CandlestickSeries(
            key = "price",
            name = "Fiyat (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 = "Hacim (bin lot)",
            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 = "Bir hissenin üç haftalık günlük fiyatı ve işlem hacmi",
    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

Takvimdeki günler

Aynı üç hafta, bu kez günleri birer an olarak: Haziran 2026'nın ilk üç haftası. Mumlar takvimdeki yerlerinde durur, iki hafta sonu birer boşluk olarak görünür, ve eksen haftaların başına işaretlenir.

Anahtarı aç (ChartTime(gapless = true)): borsanın kapalı olduğu hafta sonları kapanır, mumlar eşit aralıklarla yan yana durur ve eksen yine günlere ya da haftalara, her birinin ilk mumuna işaretlenir.

Günler UTC'nin günleri olduğu için eksen de UTC'ye göre okunuyor (ChartTime'ın offset'i): cihazın saati ne olursa olsun bir mum kendi gününde durur.

var gapless by remember { mutableStateOf(false) }
PantrixSwitchButton(
    checked = gapless,
    onCheckedChange = { gapless = it },
    label = "Hafta sonları olmadan",
    tagKey = "candles_gapless"
)
PantrixCandlestickChart(
    data = THREE_WEEKS,
    x = { dayOf(it) },
    open = { it.open },
    high = { it.high },
    low = { it.low },
    close = { it.close },
    name = "Fiyat (TL)",
    xAxis = ChartAxis(time = ChartTime(offset = { Duration.ZERO }, gapless = gapless)),
    description = "Bir hissenin Haziran 2026'nın ilk üç haftasındaki günlük fiyatı, takvimdeki günlerinde",
    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")

Bir muma basmak

Bir basış mumu alır: noktanın value'su kapanış, from'u açılış, high ve low'u fitilin iki ucudur. Bir muma bas: alttaki satır günün ne kadar oynadığını ve nasıl kapandığını yazar.

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 = "Fiyat (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 = "${point.label}. gün: ${strings.decimal(swing)} TL oynadı, kapanışta $change TL"
    },
    description = "Bir hissenin üç haftalık günlük fiyatı",
    tagKey = "press"
)
PantrixText(text = pressed ?: "Bir muma bas")

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

Bir mum grafiği: her yerde bir şeyin neyle açıldığı ve neyle kapandığı, bir de ikisinin arasında vardığı en yüksek ve en düşük değer; bir fiyatın bir işlem gününde yaptığı gibi.

ChartStyle

Bir grafiğin geometrisi: hiçbir şey söylemediğinde ne kadar yüksek olduğu, çizgilerinin ne kadar kalın, işaretlerinin ne kadar büyük olduğu ve parçalarının arasındaki boşluk; ve dolgularının renklerinin yanında desen alıp almadığı.

ChartColors

Temanın renklerini almayan bir grafik için, onun neyle boyandığı: verilen renk kullanılır, verilmeyen temanınki kalır.

Erişilebilirlik

• Tooltip ve ekran okuyucu. Bir mum dört değeriyle yazılır, her biri temanın dilindeki adıyla: açılış, en yüksek, en düşük, kapanış. Bir basış, noktanın value'sunda kapanışı, from'unda açılışı, high ve low'unda fitilin iki ucunu alır.