Skip to content

fix chart on resize #154

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
ehsannarmani merged 3 commits into from
Feb 11, 2026
Merged

fix chart on resize #154

Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
65d3a16
key line positions to chart size
sproctor Jan 12, 2026
227c95c
remove unnecessary launch
sproctor Jan 12, 2026
576fd6d
key chart size to density
sproctor Jan 12, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
100 changes: 45 additions & 55 deletions compose-charts/src/commonMain/kotlin/ir/ehsannarmani/compose_charts/LineChart.kt
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,10 +18,12 @@ import androidx.compose.foundation.text.BasicText
import androidx.compose.runtime.Composable
import androidx.compose.runtime.CompositionLocalProvider
import androidx.compose.runtime.LaunchedEffect
import androidx.compose.runtime.mutableFloatStateOf
import androidx.compose.runtime.getValue
import androidx.compose.runtime.mutableStateListOf
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.runtime.rememberCoroutineScope
import androidx.compose.runtime.setValue
import androidx.compose.ui.Modifier
import androidx.compose.ui.geometry.CornerRadius
import androidx.compose.ui.geometry.Offset
Expand Down Expand Up @@ -127,31 +129,31 @@ fun LineChart(
val density = LocalDensity.current
val scope = rememberCoroutineScope()

val pathMeasure = remember {
var chartSize by remember(density) { mutableStateOf(Size(0f, 0f)) }

val pathMeasure = remember(chartSize) {
PathMeasure()
}

val popupAnimation = remember {
val popupAnimation = remember(data) {
Animatable(0f)
}

val zeroLineAnimation = remember {
val zeroLineAnimation = remember(data) {
Animatable(0f)
}
val chartWidth = remember {
mutableFloatStateOf(0f)
}

val dotAnimators = remember {
val dotAnimators = remember(data) {
mutableStateListOf<List<Animatable<Float, AnimationVector1D>>>()
}
val popups = remember {

val popups = remember(data) {
mutableStateListOf<Popup>()
}
val popupsOffsetAnimators = remember {
val popupsOffsetAnimators = remember(chartSize, data) {
mutableStateListOf<Pair<Animatable<Float, AnimationVector1D>, Animatable<Float, AnimationVector1D>>>()
}
val linesPathData = remember {
val linesPathData = remember(chartSize, data) {
mutableStateListOf<PathData>()
}

Expand All @@ -165,15 +167,15 @@ fun LineChart(
)
}
}
val indicatorAreaWidth = remember {
val indicatorAreaWidth = remember(chartSize, indicators) {
if (indicatorProperties.enabled) {
indicators.maxOf { textMeasurer.measure(indicatorProperties.contentBuilder(it)).size.width } + (indicatorProperties.padding.value * density.density)
} else {
0f
}
}

val xPadding = remember {
val xPadding = remember(indicatorAreaWidth) {
if (indicatorProperties.enabled && indicatorProperties.position == IndicatorPosition.Horizontal.Start) {
indicatorAreaWidth
} else {
Expand All @@ -190,14 +192,12 @@ fun LineChart(
// make animators
LaunchedEffect(data) {
dotAnimators.clear()
launch {
data.forEach {
val animators = mutableListOf<Animatable<Float, AnimationVector1D>>()
repeat(it.values.size) {
animators.add(Animatable(0f))
}
dotAnimators.add(animators)
data.forEach {
val animators = mutableListOf<Animatable<Float, AnimationVector1D>>()
repeat(it.values.size) {
animators.add(Animatable(0f))
}
dotAnimators.add(animators)
}
}

Expand All @@ -212,39 +212,29 @@ fun LineChart(
delay(line.gradientAnimationDelay)
line.gradientProgress.animateTo(1f, animationSpec = line.gradientAnimationSpec)
}
launch {
data.forEachIndexed { index, line ->
when (animationMode) {
is AnimationMode.OneByOne -> {
animateStroke(line)
data.forEachIndexed { index, line ->
when (animationMode) {
is AnimationMode.OneByOne -> {
launch {
animateGradient(line)
}
animateStroke(line)
}

is AnimationMode.Together -> {
launch {
delay(animationMode.delayBuilder(index))
animateStroke(line)
}
is AnimationMode.Together -> {
launch {
delay(animationMode.delayBuilder(index))
animateStroke(line)
}
}
}
}
launch {
data.forEachIndexed { index, line ->
when (animationMode) {
is AnimationMode.OneByOne -> {
launch {
delay(animationMode.delayBuilder(index))
animateGradient(line)
}

is AnimationMode.Together -> {
launch {
delay(animationMode.delayBuilder(index))
animateGradient(line)
}
}
}
}
}
}

LaunchedEffect(data, minValue, computedMaxValue) {
linesPathData.clear()
}
Expand Down Expand Up @@ -408,13 +398,12 @@ fun LineChart(
)
}
) {
val chartAreaHeight = size.height
chartWidth.value = size.width
chartSize = size
val drawZeroLine = {
val zeroY = chartAreaHeight - calculateOffset(
val zeroY = size.height - calculateOffset(
minValue = minValue,
maxValue = computedMaxValue,
total = chartAreaHeight,
total = size.height,
value = 0f
).toFloat()
drawLine(
Expand All @@ -439,7 +428,7 @@ fun LineChart(
maxValue = computedMaxValue.toFloat(),
minValue = minValue.toFloat(),
rounded = it.curvedEdges ?: curvedEdges,
size = size.copy(height = chartAreaHeight),
size = size,
startIndex,
endIndex
)
Expand All @@ -453,7 +442,7 @@ fun LineChart(
indicatorPosition = indicatorProperties.position,
xAxisProperties = gridProperties.xAxisProperties,
yAxisProperties = gridProperties.yAxisProperties,
size = size.copy(height = chartAreaHeight),
size = size,
gridEnabled = gridProperties.enabled
)
if (zeroLineProperties.enabled && zeroLineProperties.zType == ZeroLineProperties.ZType.Under) {
Expand Down Expand Up @@ -501,7 +490,7 @@ fun LineChart(
color1 = line.firstGradientFillColor,
color2 = line.secondGradientFillColor,
progress = line.gradientProgress.value,
size = size.copy(height = chartAreaHeight),
size = size,
startOffset,
endOffset
)
Expand All @@ -515,7 +504,7 @@ fun LineChart(
color1 = fillColor,
color2 = fillColor,
progress = 1f,
size = size.copy(height = chartAreaHeight),
size = size,
startOffset,
endOffset
)
Expand All @@ -539,7 +528,7 @@ fun LineChart(
minValue = minValue.toFloat(),
pathMeasure = pathMeasure,
scope = scope,
size = size.copy(height = chartAreaHeight),
size = size,
startIndex = pathData.startIndex,
endIndex = pathData.endIndex
)
Expand Down Expand Up @@ -574,7 +563,7 @@ fun LineChart(
labelProperties = labelProperties,
labels = labelProperties.labels,
indicatorProperties = indicatorProperties,
chartWidth = chartWidth.value,
chartWidth = chartSize.width,
density = density,
textMeasurer = textMeasurer,
xPadding = xPadding
Expand Down Expand Up @@ -793,8 +782,9 @@ fun DrawScope.drawDots(
}
}
}

data class DotInfo(
val animator:Animatable<Float, AnimationVector1D>,
val animator: Animatable<Float, AnimationVector1D>,
val dataIndex: Int,
val value: Float,
)
Expand Down