### Compose LineChart Example

Source: https://context7.com/ehsannarmani/composecharts/llms.txt

Demonstrates how to create and configure a LineChart with multiple lines, custom styles, animations, and popup settings. Individual lines can override global defaults.

```kotlin
import androidx.compose.animation.core.EaseInOutCubic
import androidx.compose.animation.core.tween
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.padding
import androidx.compose.runtime.Composable
import androidx.compose.runtime.remember
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.graphics.SolidColor
import androidx.compose.ui.text.TextStyle
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp
import ir.ehsannarmani.compose_charts.LineChart
import ir.ehsannarmani.compose_charts.models.*

@Composable
fun MyLineChart() {
    val data = remember {
        listOf(
            Line(
                label = "Windows",
                values = listOf(75.0, 5.0, 70.0, 85.0, 0.0),
                color = SolidColor(Color(0xFF2B8130)),
                firstGradientFillColor = Color(0xFF66BB6A).copy(alpha = .4f),
                secondGradientFillColor = Color.Transparent,
                strokeAnimationSpec = tween(2000, easing = EaseInOutCubic),
                gradientAnimationDelay = 1000,
                drawStyle = DrawStyle.Stroke(width = 2.dp),
                curvedEdges = true,
                dotProperties = DotProperties(
                    enabled = true,
                    color = SolidColor(Color.White),
                    strokeWidth = 2.dp,
                    radius = 4.dp,
                    strokeColor = SolidColor(Color(0xFF2B8130)),
                )
            ),
            Line(
                label = "Linux",
                values = listOf(1.0, 19.0, 22.0, 0.0, 5.0),
                color = SolidColor(Color(0xFFDA860C)),
                firstGradientFillColor = Color(0xFFFFA726).copy(alpha = .4f),
                secondGradientFillColor = Color.Transparent,
                strokeAnimationSpec = tween(2000, easing = EaseInOutCubic),
                gradientAnimationDelay = 1000,
                drawStyle = DrawStyle.Stroke(width = 2.dp),
                // disable popup for this specific line
                popupProperties = PopupProperties(enabled = false)
            ),
        )
    }

    LineChart(
        modifier = Modifier.fillMaxSize().padding(horizontal = 22.dp),
        data = data,
        curvedEdges = false,                            // global default; per-line values override this
        animationMode = AnimationMode.Together(delayBuilder = { index -> index * 500L }),
        gridProperties = GridProperties(
            xAxisProperties = GridProperties.AxisProperties(
                thickness = .2.dp,
                color = SolidColor(Color.Gray.copy(alpha = .5f)),
                style = StrokeStyle.Dashed(intervals = floatArrayOf(15f, 15f), phase = 10f),
            ),
            yAxisProperties = GridProperties.AxisProperties(
                thickness = .2.dp,
                color = SolidColor(Color.Gray.copy(alpha = .5f)),
                style = StrokeStyle.Dashed(intervals = floatArrayOf(15f, 15f), phase = 10f),
            )
        ),
        dividerProperties = DividerProperties(
            xAxisProperties = LineProperties(thickness = .2.dp, color = SolidColor(Color.Gray.copy(alpha = .5f))),
            yAxisProperties = LineProperties(thickness = .2.dp, color = SolidColor(Color.Gray.copy(alpha = .5f)))
        ),
        zeroLineProperties = ZeroLineProperties(
            enabled = true,
            color = SolidColor(Color(0xFFAD1457)),
            thickness = 1.dp
        ),
        indicatorProperties = HorizontalIndicatorProperties(
            textStyle = TextStyle(fontSize = 11.sp, color = Color.White),
            contentBuilder = { it.format(1) + " M" }
        ),
        labelProperties = LabelProperties(
            enabled = true,
            labels = listOf("Jan", "Feb", "Mar", "Apr", "May"),
            textStyle = TextStyle(fontSize = 11.sp, color = Color.White)
        ),
        labelHelperProperties = LabelHelperProperties(enabled = true),
        popupProperties = PopupProperties(
            textStyle = TextStyle(fontSize = 11.sp, color = Color.White),
            containerColor = Color(0xff414141),
            contentBuilder = { popup -> "${popup.value.format(1)} M — line ${popup.dataIndex}, pt ${popup.valueIndex}" }
        ),
        minValue = 0.0,
        maxValue = 100.0
    )
}
```

--------------------------------

### Basic Pie Chart Implementation

Source: https://github.com/ehsannarmani/composecharts/blob/master/document/docs/charts/pie-chart.md

Demonstrates the basic setup for a Pie Chart with sample data and click handling. Customize animation specs and selected slice scaling.

```kotlin
var data by remember {
    mutableStateOf(
        listOf(
            Pie(label = "Android", data = 20.0, color = Color.Red, selectedColor = Color.Green),
            Pie(label = "Windows", data = 45.0, color = Color.Cyan, selectedColor = Color.Blue),
            Pie(label = "Linux", data = 35.0, color = Color.Gray, selectedColor = Color.Yellow),
        )
    )
}
PieChart(
    modifier = Modifier.size(200.dp),
    data = data,
    onPieClick = {
        println("${it.label} Clicked")
        val pieIndex = data.indexOf(it)
        data = data.mapIndexed { mapIndex, pie -> pie.copy(selected = pieIndex == mapIndex) }
    },
    selectedScale = 1.2f,
    scaleAnimEnterSpec = spring<Float>(
        dampingRatio = Spring.DampingRatioMediumBouncy,
        stiffness = Spring.StiffnessLow
    ),
    colorAnimEnterSpec = tween(300),
    colorAnimExitSpec = tween(300),
    scaleAnimExitSpec = tween(300),
    spaceDegreeAnimExitSpec = tween(300),
    style = Pie.Style.Fill
)
```

--------------------------------

### Basic Line Chart Implementation

Source: https://github.com/ehsannarmani/composecharts/blob/master/document/docs/charts/line-chart.md

Demonstrates the fundamental setup for a line chart with a single data series and animation.

```kotlin
LineChart(
    modifier = Modifier.fillMaxSize().padding(horizontal = 22.dp),
    data = remember {
        listOf(
            Line(
                label = "Windows",
                values = listOf(28.0, 41.0, 5.0, 10.0, 35.0),
                color = SolidColor(Color(0xFF23af92)),
                firstGradientFillColor = Color(0xFF2BC0A1).copy(alpha = .5f),
                secondGradientFillColor = Color.Transparent,
                strokeAnimationSpec = tween(2000, easing = EaseInOutCubic),
                gradientAnimationDelay = 1000,
                drawStyle = DrawStyle.Stroke(width = 2.dp),
            )
        )
    },
    animationMode = AnimationMode.Together(
        delayBuilder = {
            it * 500L
        }
    ),
)
```

--------------------------------

### Compose ColumnChart Example

Source: https://context7.com/ehsannarmani/composecharts/llms.txt

Demonstrates how to use the ColumnChart composable with sample data, custom bar properties, animations, and grid/label configurations. Ensure necessary imports are included.

```kotlin
import androidx.compose.animation.core.Spring
import androidx.compose.animation.core.spring
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.padding
import androidx.compose.runtime.Composable
import androidx.compose.runtime.remember
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Brush
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.graphics.SolidColor
import androidx.compose.ui.unit.dp
import ir.ehsannarmani.compose_charts.ColumnChart
import ir.ehsannarmani.compose_charts.models.*

@Composable
fun MyColumnChart() {
    ColumnChart(
        modifier = Modifier.fillMaxSize().padding(horizontal = 22.dp),
        data = remember {
            listOf(
                Bars(
                    label = "Jan",
                    values = listOf(
                        Bars.Data(
                            label = "Linux",
                            value = 50.0,
                            color = Brush.verticalGradient(listOf(Color(0xFF66BB6A), Color(0xFF2E7D32)))
                        ),
                        Bars.Data(
                            label = "Windows",
                            value = 70.0,
                            color = SolidColor(Color(0xFFEF5350))
                        )
                    )
                ),
                Bars(
                    label = "Feb",
                    values = listOf(
                        Bars.Data(
                            label = "Linux",
                            value = 80.0,
                            color = Brush.verticalGradient(listOf(Color(0xFF66BB6A), Color(0xFF2E7D32)))
                        ),
                        Bars.Data(
                            label = "Windows",
                            value = 60.0,
                            color = SolidColor(Color(0xFFEF5350))
                        )
                    )
                ),
                Bars(
                    label = "Mar",
                    values = listOf(
                        Bars.Data(label = "Linux", value = -40.0, color = SolidColor(Color(0xFF42A5F5))),
                        Bars.Data(label = "Windows", value = 55.0, color = SolidColor(Color(0xFFEF5350)))
                    )
                ),
            )
        },
        barProperties = BarProperties(
            thickness = 20.dp,
            spacing = 3.dp,
            cornerRadius = Bars.Data.Radius.Rectangle(topRight = 6.dp, topLeft = 6.dp),
            style = DrawStyle.Fill
        ),
        animationMode = AnimationMode.Together(delayBuilder = { index -> index * 100L }),
        animationSpec = spring(
            dampingRatio = Spring.DampingRatioMediumBouncy,
            stiffness = Spring.StiffnessLow
        ),
        maxValue = 100.0,
        minValue = -75.0,
        gridProperties = GridProperties(enabled = true),
        labelHelperProperties = LabelHelperProperties(enabled = true),
        labelProperties = LabelProperties(
            enabled = true,
            textStyle = androidx.compose.ui.text.TextStyle(color = Color.White)
        ),
        indicatorProperties = HorizontalIndicatorProperties(
            contentBuilder = { "%.0f".format(it) }
        )
    )
}
```

--------------------------------

### Row Chart with Negative Values and Custom Bounds

Source: https://github.com/ehsannarmani/composecharts/blob/master/document/docs/charts/row-chart.md

This example shows how to configure the RowChart to display negative values. By setting `maxValue` and `minValue`, you can control the chart's bounds, overriding the default behavior which is based on the data's range.

```kotlin
RowChart(
    data = remember {
        listOf(
            Bars(
                label = "1",
                values = listOf(
                    Bars.Data(value = -40.0, color = Color.Blue)
                )
            ),
            Bars(
                label = "2",
                values = listOf(
                    Bars.Data(value = 50.0, color = Color.Blue)
                )
            ),
            ...
        )
    },
    maxValue = 75.0,
    minValue = -75.0
    ...
)
```

--------------------------------

### Set Line Chart Animation to Together with Delay

Source: https://github.com/ehsannarmani/composecharts/blob/master/document/docs/animation-mode.md

Use `AnimationMode.Together` to run animations asynchronously. You can specify a `delayBuilder` to control the start delay for each animation based on its index.

```kotlin
LineChart(
   ...,
   animationMode = AnimationMode.Together(delayBuilder = { index-> index*200 })
)
```

--------------------------------

### Animation Modes for Charts

Source: https://context7.com/ehsannarmani/composecharts/llms.txt

Controls how multiple animations within a chart start relative to each other. Use AnimationMode.Together for simultaneous animation, AnimationMode.Together with delayBuilder for staggered animation, AnimationMode.OneByOne for sequential animation, or AnimationMode.None to disable animation.

```kotlin
import ir.ehsannarmani.compose_charts.LineChart
import ir.ehsannarmani.compose_charts.models.AnimationMode

// All lines animate simultaneously (default)
LineChart(
    data = data,
    animationMode = AnimationMode.Together()
)
```

```kotlin
// Each subsequent line starts 300 ms after the previous one starts
LineChart(
    data = data,
    animationMode = AnimationMode.Together(delayBuilder = { index -> index * 300L })
)
```

```kotlin
// Each line waits for the previous animation to fully complete
LineChart(
    data = data,
    animationMode = AnimationMode.OneByOne
)
```

```kotlin
// No animation at all
LineChart(
    data = data,
    animationMode = AnimationMode.None
)
```

--------------------------------

### Basic Column Chart Implementation

Source: https://github.com/ehsannarmani/composecharts/blob/master/document/docs/charts/column-chart.md

Demonstrates the basic structure for creating a column chart with sample data and customizable bar properties. Includes animation specifications.

```kotlin
ColumnChart(
    modifier = Modifier.fillMaxSize().padding(horizontal = 22.dp),
    data = remember {
        listOf(
            Bars(
                label = "Jan",
                values = listOf(
                    Bars.Data(label = "Linux", value = 50.0, color = Brush.verticalGradient(...),
                    Bars.Data(label = "Windows", value = 70.0, color = SolidColor(Color.Red))
                ),
            ),
            Bars(
                label = "Feb",
                values = listOf(
                    Bars.Data(label = "Linux", value = 80.0, color = Brush.verticalGradient(...),
                    Bars.Data(label = "Windows", value = 60.0, color = SolidColor(Color.Red))
                ),
            )
        )
    },
    barProperties = BarProperties(
        radius = Bars.Data.Radius.Rectangle(topRight = 6.dp, topLeft = 6.dp),
        spacing = 3.dp,
        strokeWidth = 20.dp
    ),
    animationSpec = spring(
        dampingRatio = Spring.DampingRatioMediumBouncy,
        stiffness = Spring.StiffnessLow
    ),
)
```

--------------------------------

### Configure Line Properties

Source: https://github.com/ehsannarmani/composecharts/blob/master/document/docs/chart-properties/lines.md

Instantiate and configure line properties for a chart. This includes setting visibility, style, color, and thickness.

```kotlin
val lineProperties = LineProperties(
    enabled = true,
    style = StrokeStyle.Dashed(intervals = floatArrayOf(10f,10f)),
    color = Color.Gray,
    thickness = (.5).dp,
)
```

--------------------------------

### Basic Row Chart Implementation

Source: https://github.com/ehsannarmani/composecharts/blob/master/document/docs/charts/row-chart.md

This snippet demonstrates the basic usage of the RowChart with sample data, custom bar properties, and animation specifications. Ensure all necessary imports for Modifier, Color, Brush, and animation are present.

```kotlin
RowChart(
    modifier = Modifier.fillMaxSize().padding(horizontal = 22.dp),
    data = remember {
        listOf(
            Bars(
                label = "Jan",
                values = listOf(
                    Bars.Data(label = "Linux", value = 50.0, color = Brush.verticalGradient(...),
                    Bars.Data(label = "Windows", value = 70.0, color = SolidColor(Color.Red)),
                ),
            ),
            Bars(
                label = "Feb",
                values = listOf(
                    Bars.Data(label = "Linux", value = 80.0, color = Brush.verticalGradient(...),
                    Bars.Data(label = "Windows", value = 60.0, color = SolidColor(Color.Red)),
                ),
            )
        ),
    },
    barProperties = BarProperties(
        radius = Bars.Data.Radius.Rectangle(topRight = 6.dp, topLeft = 6.dp),
        spacing = 3.dp,
        strokeWidth = 20.dp
    ),
    animationSpec = spring(
        dampingRatio = Spring.DampingRatioMediumBouncy,
        stiffness = Spring.StiffnessLow
    ),
)
```

--------------------------------

### Configure Label Helper Properties

Source: https://github.com/ehsannarmani/composecharts/blob/master/document/docs/chart-properties/label-helpers.md

Use this to set the visibility and text style for label helpers. Ensure MaterialTheme is available for typography.

```kotlin
val labelHelperProperties = LabelHelperProperties(
    enabled = true,
    textStyle = MaterialTheme.typography.labelMedium
)
```

--------------------------------

### Pie Chart with Stroke Style

Source: https://github.com/ehsannarmani/composecharts/blob/master/document/docs/charts/pie-chart.md

Illustrates how to render a Pie Chart using a stroke style with customizable width, and includes options for spacing and padding between slices.

```kotlin
PieChart(
    ...,
    spaceDegree = 7f,
    selectedPaddingDegree = 4f,
    style = Pie.Style.Stroke(width = 100f)
)
```

--------------------------------

### Configure Basic Label Properties

Source: https://github.com/ehsannarmani/composecharts/blob/master/document/docs/chart-properties/labels.md

Set visibility, text style, vertical padding, and custom labels for chart axes. The builder lambda allows for custom label composables.

```kotlin
val labelProperties = LabelProperties(
    enabled = true,
    textStyle = MaterialTheme.typography.labelSmall,
    verticalPadding = 16.dp,
    labels = listOf("Apr","Mar",…),
    builder = {modifier,label,shouldRotate,index->
        Text(modifier=modifier,text=label)
    }
)
```

--------------------------------

### Popup Properties for Tooltips

Source: https://context7.com/ehsannarmani/composecharts/llms.txt

Configures the tooltip that appears on user interaction. Supports enabling/disabling, animation, duration, text styling, container appearance, padding, and conditional rendering. Can be set globally or per line.

```kotlin
import androidx.compose.animation.core.tween
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.text.TextStyle
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp
import ir.ehsannarmani.compose_charts.models.PopupProperties

// Standard popup
val popup = PopupProperties(
    enabled = true,
    animationSpec = tween(300),
    duration = 2000L,                    // ms visible in column/row charts
    textStyle = TextStyle(fontSize = 11.sp, color = Color.White),
    containerColor = Color(0xFF414141),
    cornerRadius = 8.dp,
    contentHorizontalPadding = 4.dp,
    contentVerticalPadding = 2.dp,
    contentBuilder = { popup ->
        // popup.dataIndex = which line/bar group
        // popup.valueIndex = which data point
        // popup.value = the numeric value
        "${popup.value.format(1)} Million"
    }
)
```

```kotlin
// Only show popup exactly on data-point positions (line charts)
val pointPopup = PopupProperties(
    mode = PopupProperties.Mode.PointMode(),
    contentBuilder = { popup -> "${popup.value.format(1)} — pt ${popup.valueIndex}" }
)
```

```kotlin
// Conditionally suppress popup rendering
val conditionalPopup = PopupProperties(
    contentBuilder = { popup -> "${popup.value.format(1)} M" },
    confirmDraw = { context -> context.value > 50 }
)
```

--------------------------------

### Column Chart with Data Count

Source: https://github.com/ehsannarmani/composecharts/blob/master/document/docs/charts/column-chart.md

Shows how to configure the column chart to display a specific number of data points per bar. Adjusts bar spacing and stroke width.

```kotlin
ColumnChart(
    data = remember {
        listOf(
            Bars(
                label = "1",
                values = listOf(
                    Bars.Data(value = 10.0, color = Color.Blue)
                )
            ),
            Bars(
                label = "2",
                values = listOf(
                    Bars.Data(value = 20.0, color = Color.Blue)
                )
            ),
            ...
        )
    },
    barProperties = BarProperties(
        spacing = 1.dp,
        strokeWidth = 10.dp,
    ),
    ...
)
```

--------------------------------

### Define Line Series with Dots and Gradient Fill

Source: https://context7.com/ehsannarmani/composecharts/llms.txt

Use this snippet to create a line with a solid color stroke, a gradient fill, and customizable dots. Animation specs can be applied independently.

```kotlin
import androidx.compose.animation.core.EaseInOutCubic
import androidx.compose.animation.core.tween
import androidx.compose.ui.graphics.Brush
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.graphics.SolidColor
import androidx.compose.ui.unit.dp
import ir.ehsannarmani.compose_charts.models.*

// Solid-color stroke line with gradient fill and dots
val lineWithDots = Line(
    label = "Revenue",
    values = listOf(10.0, 40.0, 28.0, 60.0, 55.0),
    color = SolidColor(Color(0xFF5A47CF)),
    firstGradientFillColor = Color(0xFF6655CF).copy(alpha = .5f),
    secondGradientFillColor = Color.Transparent,
    drawStyle = DrawStyle.Stroke(width = 3.dp),
    strokeAnimationSpec = tween(2000, easing = EaseInOutCubic),
    gradientAnimationDelay = 1000,
    curvedEdges = true,
    dotProperties = DotProperties(
        enabled = true,
        radius = 4.dp,
        color = SolidColor(Color.White),
        strokeWidth = 2.dp,
        strokeColor = SolidColor(Color(0xFF5A47CF)),
        animationSpec = tween(500)
    )
)
```

--------------------------------

### Configure Dot Properties

Source: https://github.com/ehsannarmani/composecharts/blob/master/document/docs/chart-properties/dots.md

Set various properties to customize the appearance and animation of data dots in a line chart. Ensure `enabled` is true to make dots visible.

```kotlin
val dotProperties = DotProperties(
    enabled = true,
    radius = 4.dp,
    color = SolidColor(Color.Red),
    strokeWidth = 3.dp,
    strokeColor = Color.White,
    strokeStyle = StrokeStyle.Normal,
    animationEnabled = true,
    animationSpec = tween(500)
)
```

--------------------------------

### Create Animated Pie or Donut Charts

Source: https://context7.com/ehsannarmani/composecharts/llms.txt

PieChart renders animated pie or donut charts. Customize slice appearance, animations, and handle tap events for interactivity. Supports both filled and stroke styles.

```kotlin
import androidx.compose.animation.core.Spring
import androidx.compose.animation.core.spring
import androidx.compose.animation.core.tween
import androidx.compose.foundation.layout.size
import androidx.compose.runtime.Composable
import androidx.compose.runtime.getValue
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.runtime.setValue
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.unit.dp
import ir.ehsannarmani.compose_charts.PieChart
import ir.ehsannarmani.compose_charts.models.LabelHelperProperties
import ir.ehsannarmani.compose_charts.models.Pie

@Composable
fun MyPieChart() {
    var data by remember {
        mutableStateOf(
            listOf(
                Pie(label = "Android", data = 20.0, color = Color(0xFFEF5350), selectedColor = Color(0xFFB71C1C)),
                Pie(label = "Windows", data = 45.0, color = Color(0xFF42A5F5), selectedColor = Color(0xFF1565C0)),
                Pie(label = "Linux",   data = 35.0, color = Color(0xFF66BB6A), selectedColor = Color(0xFF2E7D32)),
            )
        )
    }

    // Filled pie
    PieChart(
        modifier = Modifier.size(200.dp),
        data = data,
        onPieClick = { clicked ->
            val idx = data.indexOf(clicked)
            data = data.mapIndexed { i, pie -> pie.copy(selected = i == idx) }
        },
        selectedScale = 1.2f,
        scaleAnimEnterSpec = spring(dampingRatio = Spring.DampingRatioMediumBouncy, stiffness = Spring.StiffnessLow),
        colorAnimEnterSpec = tween(300),
        colorAnimExitSpec = tween(300),
        scaleAnimExitSpec = tween(300),
        spaceDegreeAnimExitSpec = tween(300),
        labelHelperProperties = LabelHelperProperties(enabled = true),
        style = Pie.Style.Fill
    )

    // Donut / stroke style with spacing between slices
    PieChart(
        modifier = Modifier.size(200.dp),
        data = data,
        onPieClick = { clicked ->
            val idx = data.indexOf(clicked)
            data = data.mapIndexed { i, pie -> pie.copy(selected = i == idx) }
        },
        spaceDegree = 7f,
        selectedPaddingDegree = 4f,
        selectedScale = 1.1f,
        style = Pie.Style.Stroke(width = 50.dp)
    )
}
```

--------------------------------

### Column Chart with Negative Values

Source: https://github.com/ehsannarmani/composecharts/blob/master/document/docs/charts/column-chart.md

Illustrates how to represent negative values in the column chart and explicitly set maximum and minimum values for the Y-axis. The default behavior for min value is also described.

```kotlin
ColumnChart(
    data = remember {
        listOf(
            Bars(
                label = "1",
                values = listOf(
                    Bars.Data(value = -40.0, color = Color.Blue)
                )
            ),
            Bars(
                label = "2",
                values = listOf(
                    Bars.Data(value = 50.0, color = Color.Blue)
                )
            ),
            ...
        )
    },
    maxValue = 75.0,
    minValue = -75.0
    ...
)
```

--------------------------------

### Configure Label Properties for Charts

Source: https://context7.com/ehsannarmani/composecharts/llms.txt

Defines how category labels are displayed. Supports basic text styling, rotation on overflow, or custom composable builders for labels.

```kotlin
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.text.TextStyle
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp
import ir.ehsannarmani.compose_charts.models.LabelProperties

// Basic text labels with rotation on overflow
val labelProperties = LabelProperties(
    enabled = true,
    textStyle = TextStyle(fontSize = 11.sp, color = Color.White),
    verticalPadding = 16.dp,
    labels = listOf("Jan", "Feb", "Mar", "Apr", "May"),
    rotation = LabelProperties.Rotation(
        mode = LabelProperties.Rotation.Mode.IfNecessary,   // rotate only when labels overlap
        degree = -45f
    )
)

// Force rotation always
val forcedRotation = LabelProperties(
    enabled = true,
    textStyle = TextStyle(fontSize = 11.sp, color = Color.White),
    labels = listOf("January", "February", "March", "April", "May"),
    rotation = LabelProperties.Rotation(
        mode = LabelProperties.Rotation.Mode.Force,
        degree = -45f
    )
)

// Custom composable label builder
val customLabels = LabelProperties(
    enabled = true,
    builder = { modifier, label, shouldRotate, index ->
        androidx.compose.material3.Text(modifier = modifier, text = label, color = Color.White)
    }
)
```

--------------------------------

### Line Chart with Multiple Lines

Source: https://github.com/ehsannarmani/composecharts/blob/master/document/docs/charts/line-chart.md

Renders a line chart with multiple data series, each potentially having different styling like curved edges.

```kotlin
LineChart(
    data = remember {
        listOf(
            Line(
                label = "Windows",
                values = listOf(...),
                color = Color.Green,
                curvedEdges = true
            ),
            Line(
                label = "Linux",
                values = listOf(...),
                color = Color.Orange,
                curvedEdges = false
            ),
            Line(
                label = "Linux",
                values = listOf(...),
                color = Color.Blue,
                curvedEdges = true
            ),
        )
    },
    ...
)
```

--------------------------------

### Configure Chart Popup Properties

Source: https://github.com/ehsannarmani/composecharts/blob/master/document/docs/chart-properties/popups.md

Use this to set custom properties for chart popups. It allows configuration of visibility, animation, duration, text style, colors, padding, and content formatting.

```kotlin
val popupProperties = PopupProperties(
    enabled = true,
    animationSpec = tween(300),
    duration = 2000L,
    textStyle = MaterialTheme.typography.labelSmall,
    containerColor = Color.White,
    cornerRadius = 8.dp,
    contentHorizontalPadding = 4.dp,
    contentVerticalPadding = 2.dp,
    contentBuilder = { dataIndex, valueIndex, value->
        // data index: which data? (when you have more than one data item in your chart)
        // value index: which value?
        value.format(1)+" Million"
    }
)
```

--------------------------------

### Configure Divider Properties

Source: https://github.com/ehsannarmani/composecharts/blob/master/document/docs/chart-properties/dividers.md

Use DividerProperties to enable or disable dividers and specify line properties for horizontal and vertical axes.

```kotlin
val dividerProperties = DividerProperties(
    enabled = true,
    xAxisProperties = LineProperties(
        ...
    ),
    yAxisProperties = LineProperties(
        ...
    )
)
```

--------------------------------

### Configure Grid Properties

Source: https://github.com/ehsannarmani/composecharts/blob/master/document/docs/chart-properties/grid-lines.md

Set the visibility and axis-specific properties for grid lines. Use this to enable or disable grid lines and customize their appearance on the horizontal and vertical axes.

```kotlin
val gridProperties = GridProperties(
    enabled = true,
    xAxisProperties = AxisProperties(
        ...
    ),
    yAxisProperties = AxisProperties(
        ...
    )
)
```

--------------------------------

### Line Chart with Dots and Curved Edges

Source: https://github.com/ehsannarmani/composecharts/blob/master/document/docs/charts/line-chart.md

Enables dots on the data points and controls the curvature of the line edges.

```kotlin
LineChart(
    data = remember {
        listOf(
            Line(
                label = "Windows",
                values = listOf(...),
                color = Color.Orange,
                curvedEdges = true,
                dotProperties = DotProperties(
                    enabled = true,
                    color = SolidColor(Color.White),
                    strokeWidth = 4f,
                    radius = 7f,
                    strokeColor = SolidColor(Color.Orange),
                )
            ),
            Line(
                label = "Linux",
                values = listOf(...),
                color = Color.Cyan,
                curvedEdges = false,
                dotProperties = DotProperties(
                    ...
                )
            ),
        )
    },
    curvedEdges = false
)
```

--------------------------------

### Configure Zero Line Properties for Line Charts

Source: https://context7.com/ehsannarmani/composecharts/llms.txt

Draws a reference line at y=0 for LineCharts, useful for charts with negative values. Allows customization of color, thickness, style, and animation.

```kotlin
import androidx.compose.animation.core.tween
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.graphics.SolidColor
import androidx.compose.ui.unit.dp
import ir.ehsannarmani.compose_charts.models.ZeroLineProperties
import ir.ehsannarmani.compose_charts.models.StrokeStyle

val zeroLineProperties = ZeroLineProperties(
    enabled = true,
    color = SolidColor(Color(0xFFAD1457)),
    thickness = 1.dp,
    style = StrokeStyle.Dashed(intervals = floatArrayOf(8f, 8f), phase = 0f),
    animationSpec = tween(durationMillis = 1000, delayMillis = 300),
    zType = ZeroLineProperties.ZType.Under   // draw behind (Under) or in front of (Above) data lines
)
```

--------------------------------

### Bar Properties Configuration

Source: https://context7.com/ehsannarmani/composecharts/llms.txt

Configures the visual appearance of bars, including thickness, spacing, corner radius, and drawing style. Supports rectangular, circular, or no rounded corners, and stroke or fill styles.

```kotlin
import ir.ehsannarmani.compose_charts.models.BarProperties
import ir.ehsannarmani.compose_charts.models.Bars
import ir.ehsannarmani.compose_charts.models.DrawStyle
import androidx.compose.ui.unit.dp

// Rounded-top bars with spacing
val barProperties = BarProperties(
    thickness = 20.dp,
    spacing = 4.dp,
    cornerRadius = Bars.Data.Radius.Rectangle(topRight = 6.dp, topLeft = 6.dp),
    style = DrawStyle.Fill
)
```

```kotlin
// Circular corners
val circularBars = BarProperties(
    thickness = 15.dp,
    spacing = 6.dp,
    cornerRadius = Bars.Data.Radius.Circular(radius = 8.dp)
)
```

```kotlin
// Stroke-style (outline) bars
val outlineBars = BarProperties(
    thickness = 20.dp,
    cornerRadius = Bars.Data.Radius.None,
    style = DrawStyle.Stroke(width = 2.dp)
)
```

--------------------------------

### Line Chart with Zero Line and Value Range

Source: https://github.com/ehsannarmani/composecharts/blob/master/document/docs/charts/line-chart.md

Configures a line chart to display a zero line and sets explicit minimum and maximum values for the y-axis, useful for charts with negative data points.

```kotlin
LineChart(
    data = remember {
        listOf(
            Line(
                label = "Temperature",
                values = listOf(28.0, 41.0, -15.0, 27.0, 54.0),
                color = Brush.radialGradient(...)
            ),
        )
    },
    zeroLineProperties = LineProperties(
        enabled = true,
        color = SolidColor(Color.Red),
    ),
    minValue = -20.0,
    maxValue = 100.0
)
```

--------------------------------

### Add Compose Charts Dependency

Source: https://github.com/ehsannarmani/composecharts/blob/master/README.md

Add this dependency to your module's build.gradle file to include the Compose Charts library. Replace 'latest_version' with the actual latest version number.

```gradle
dependencies {
    implementation ("io.github.ehsannarmani:compose-charts:latest_version")
}
```

--------------------------------

### Define Dashed Stroke Line

Source: https://context7.com/ehsannarmani/composecharts/llms.txt

Configure a line with a dashed stroke style. Specify intervals and phase for the dashed pattern. Animation can be applied to the stroke.

```kotlin
// Dashed stroke line with fill draw style
val dashedLine = Line(
    label = "Target",
    values = listOf(67.0, 0.0, 88.0, 90.0, 95.0),
    color = SolidColor(Color(0xFFFB8231)),
    drawStyle = DrawStyle.Stroke(
        width = 3.dp,
        strokeStyle = StrokeStyle.Dashed(intervals = floatArrayOf(10f, 10f), phase = 15f)
    ),
    strokeAnimationSpec = tween(2000, easing = EaseInOutCubic),
)
```

--------------------------------

### Configure Label Helper Properties for Charts

Source: https://context7.com/ehsannarmani/composecharts/llms.txt

Controls the legend-like label helper row at the top of the chart. Can be enabled with custom text styles or disabled entirely.

```kotlin
import androidx.compose.ui.text.TextStyle
import androidx.compose.ui.unit.sp
import ir.ehsannarmani.compose_charts.models.LabelHelperProperties

val labelHelperProperties = LabelHelperProperties(
    enabled = true,
    textStyle = TextStyle(fontSize = 12.sp)
)

// Hide the label helper
val noHelper = LabelHelperProperties(enabled = false)
```

--------------------------------

### Configure Horizontal Indicators

Source: https://context7.com/ehsannarmani/composecharts/llms.txt

Customizes numeric scale labels for Line and Column charts. Use `IndicatorCount.CountBased` for a fixed number of indicators, `IndicatorCount.StepBased` for interval-based indicators, or provide explicit `indicators`.

```kotlin
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.text.TextStyle
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp
import ir.ehsannarmani.compose_charts.models.HorizontalIndicatorProperties
import ir.ehsannarmani.compose_charts.models.VerticalIndicatorProperties
import ir.ehsannarmani.compose_charts.models.IndicatorCount
import ir.ehsannarmani.compose_charts.models.IndicatorPosition

// 5 evenly divided indicators on the end (right) side
val hIndicator = HorizontalIndicatorProperties(
    enabled = true,
    textStyle = TextStyle(fontSize = 11.sp, color = Color.White),
    count = IndicatorCount.CountBased(count = 5),
    position = IndicatorPosition.Horizontal.End,
    padding = 16.dp,
    contentBuilder = { value -> "%.1f M".format(value) }
)

// Step-based: show indicator every 10 units
val stepIndicator = HorizontalIndicatorProperties(
    count = IndicatorCount.StepBased(stepBy = 10.0),
    contentBuilder = { value -> "%.0f".format(value) }
)

// Override with explicit indicator values
val customIndicator = HorizontalIndicatorProperties(
    indicators = listOf(0.0, 25.0, 50.0, 75.0, 100.0),
    contentBuilder = { value -> "${value.toInt()}%".format(value) }
)
```

--------------------------------

### Set Bar Properties

Source: https://github.com/ehsannarmani/composecharts/blob/master/document/docs/chart-properties/bars.md

Use BarProperties to define the visual characteristics of bars in charts. This includes setting thickness, spacing between bars, corner radius, and fill style.

```kotlin
val barProperties = BarProperties(
    thickness = 15.dp,
    spacing = 4.dp,
    cornerRadius = Bars.Data.Radius.Circular(6.dp),
    style = DrawStyle.Fill
)
```

--------------------------------

### Configure Grid Lines

Source: https://context7.com/ehsannarmani/composecharts/llms.txt

Defines properties for horizontal and vertical grid lines. Set `enabled` to false to disable all grid lines. Customize `thickness`, `color`, `style`, and `lineCount` for axes.

```kotlin
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.graphics.SolidColor
import androidx.compose.ui.unit.dp
import ir.ehsannarmani.compose_charts.models.GridProperties
import ir.ehsannarmani.compose_charts.models.StrokeStyle

val gridProperties = GridProperties(
    enabled = true,
    xAxisProperties = GridProperties.AxisProperties(
        enabled = true,
        thickness = .2.dp,
        color = SolidColor(Color.Gray.copy(alpha = .5f)),
        style = StrokeStyle.Dashed(intervals = floatArrayOf(15f, 15f), phase = 10f),
        lineCount = 5
    ),
    yAxisProperties = GridProperties.AxisProperties(
        enabled = true,
        thickness = .2.dp,
        color = SolidColor(Color.Gray.copy(alpha = .5f)),
        style = StrokeStyle.Normal
    )
)

// Disable grid entirely
val noGrid = GridProperties(enabled = false)
```

--------------------------------

### Configure View Range for Line Rendering

Source: https://context7.com/ehsannarmani/composecharts/llms.txt

Restricts the subset of data points rendered by a Line composable. Useful for implementing sliding-window or paginated views.

```kotlin
import ir.ehsannarmani.compose_charts.models.Line
import ir.ehsannarmani.compose_charts.models.ViewRange
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.graphics.SolidColor

// Only render data points at indices 2..4 (inclusive)
val line = Line(
    label = "Windowed",
    values = listOf(10.0, 20.0, 30.0, 40.0, 50.0, 60.0, 70.0),
    color = SolidColor(Color.Blue),
    viewRange = ViewRange(startIndex = 2, endIndex = 4)
)
```

--------------------------------

### Set Line Chart Animation to OneByOne

Source: https://github.com/ehsannarmani/composecharts/blob/master/document/docs/animation-mode.md

Use `AnimationMode.OneByOne` to make animations run sequentially. For line charts, this means each line will be drawn after the previous one has finished animating.

```kotlin
LineChart(
    ...,
    animationMode = AnimationMode.OneByOne
)
```

--------------------------------

### Line Chart with Dashed Stroke Style

Source: https://github.com/ehsannarmani/composecharts/blob/master/document/docs/charts/line-chart.md

Applies a dashed stroke style to the line, allowing customization of intervals and phase.

```kotlin
LineChart(
    data = remember {
        listOf(
            Line(
                label = "Windows",
                values = listOf(...),
                drawStyle = DrawStyle.Stroke(
                    width = 3.dp,
                    strokeStyle = StrokeStyle.Dashed(intervals = floatArrayOf(10f, 10f), phase = 15f)
                )
                ...
            ),
            Line(
                label = "Linux",
                values = listOf(...),
            ),
        )
    },
)
```

--------------------------------

### Define Radial-Gradient Colored Line

Source: https://context7.com/ehsannarmani/composecharts/llms.txt

Create a line series with a radial gradient color. Animation and delay for the gradient fill can be specified.

```kotlin
// Radial-gradient colored line
val radialLine = Line(
    label = "Market Share",
    values = listOf(71.0, 0.0, 100.0, 50.0, 50.0),
    color = Brush.radialGradient(listOf(Color(0xFFFFB300), Color(0xFFD81B60))),
    strokeAnimationSpec = tween(2000, easing = EaseInOutCubic),
    gradientAnimationDelay = 1000,
)
```

--------------------------------

### Add ComposeCharts Dependency

Source: https://context7.com/ehsannarmani/composecharts/llms.txt

Add the ComposeCharts library dependency to your Gradle build file to include it in your project.

```kotlin
dependencies {
    implementation("io.github.ehsannarmani:compose-charts:0.2.5")
}
```

--------------------------------

### Configure Axis Properties

Source: https://github.com/ehsannarmani/composecharts/blob/master/document/docs/chart-properties/axis.md

Set various properties for chart axes, such as enabling the axis, defining its style, color, thickness, and the number of lines.

```kotlin
val axisProperties = AxisProperties(
    enabled = true,
    style = StrokeStyle.Dashed(intervals = floatArrayOf(10f,10f)),
    color = Color.Gray,
    thickness = (.5).dp,
    lineCount = 5
)
```

--------------------------------

### Line & Column Chart Indicator Properties

Source: https://github.com/ehsannarmani/composecharts/blob/master/document/docs/chart-properties/indicators.md

Configure indicator properties for line and column charts. Use HorizontalIndicatorProperties to set visibility, text style, count, position, padding, content builder, and override indicators.

```kotlin
val indicatorProperties = HorizontalIndicatorProperties(
            enabled = true,
            textStyle = MaterialTheme.typography.labelSmall,
            count = IndicatorCount.CountBased(count = 5),
            position = IndicatorPosition.Horizontal.End,
            padding = 32.dp,
            contentBuilder = { indicator ->
                "%.2f".format(indicator) + " Million"
            },
            indicators = listOf(10.0,50.0,30.0)
        )
```

--------------------------------

### Configure Vertical Indicators

Source: https://context7.com/ehsannarmani/composecharts/llms.txt

Customizes numeric scale labels for Row charts. Set `position` to `IndicatorPosition.Vertical.Top` or `IndicatorPosition.Vertical.Bottom`. Use `contentBuilder` to format the indicator values.

```kotlin
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.text.TextStyle
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp
import ir.ehsannarmani.compose_charts.models.HorizontalIndicatorProperties
import ir.ehsannarmani.compose_charts.models.VerticalIndicatorProperties
import ir.ehsannarmani.compose_charts.models.IndicatorCount
import ir.ehsannarmani.compose_charts.models.IndicatorPosition

// Row chart vertical indicator
val vIndicator = VerticalIndicatorProperties(
    enabled = true,
    position = IndicatorPosition.Vertical.Top,
    contentBuilder = { value -> "%.0f".format(value) }
)
```

--------------------------------

### Configure Divider Lines

Source: https://context7.com/ehsannarmani/composecharts/llms.txt

Configures divider lines between chart and label regions. Set `enabled` to false to disable all dividers. Customize `thickness`, `color`, and `style` for axes.

```kotlin
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.graphics.SolidColor
import androidx.compose.ui.unit.dp
import ir.ehsannarmani.compose_charts.models.DividerProperties
import ir.ehsannarmani.compose_charts.models.LineProperties
import ir.ehsannarmani.compose_charts.models.StrokeStyle

val dividerProperties = DividerProperties(
    enabled = true,
    xAxisProperties = LineProperties(
        enabled = true,
        thickness = .2.dp,
        color = SolidColor(Color.Gray.copy(alpha = .5f)),
        style = StrokeStyle.Dashed(intervals = floatArrayOf(15f, 15f), phase = 10f)
    ),
    yAxisProperties = LineProperties(
        enabled = true,
        thickness = .5.dp,
        color = SolidColor(Color.Gray.copy(alpha = .5f)),
        style = StrokeStyle.Normal
    )
)

// Disable dividers entirely
val noDividers = DividerProperties(enabled = false)
```

--------------------------------

### Line Chart with Gradient Color

Source: https://github.com/ehsannarmani/composecharts/blob/master/document/docs/charts/line-chart.md

Applies a radial gradient to the line for enhanced visual appeal.

```kotlin
LineChart(
    data = remember {
        listOf(
            Line(
                label = "Linux",
                values = listOf(71.0, 0.0, 100.0, 50.0, 50.0),
                color = Brush.radialGradient(...)
            ),
        )
    },
)
```

--------------------------------

### Draw Styles for Lines and Bars

Source: https://context7.com/ehsannarmani/composecharts/llms.txt

Sealed class controlling whether a line or bar is drawn as a stroke or filled. Supports solid strokes, dashed strokes with configurable intervals and phase, and filled areas.

```kotlin
import ir.ehsannarmani.compose_charts.models.DrawStyle
import ir.ehsannarmani.compose_charts.models.StrokeStyle
import androidx.compose.ui.unit.dp

// Solid stroke
val solidStroke = DrawStyle.Stroke(width = 2.dp)
```

```kotlin
// Dashed stroke
val dashedStroke = DrawStyle.Stroke(
    width = 3.dp,
    strokeStyle = StrokeStyle.Dashed(intervals = floatArrayOf(10f, 10f), phase = 15f)
)
```

```kotlin
// Filled area
val filled = DrawStyle.Fill
```

--------------------------------

### Define Filled (Area) Line

Source: https://context7.com/ehsannarmani/composecharts/llms.txt

Create a line that fills the area below it. Curved edges can be enabled for a smoother appearance. Stroke animation is supported.

```kotlin
// Filled (area) line
val filledLine = Line(
    label = "Area",
    values = listOf(30.0, 60.0, 45.0, 80.0, 70.0),
    color = SolidColor(Color(0xFFfd9644)),
    drawStyle = DrawStyle.Fill,
    curvedEdges = true,
    strokeAnimationSpec = tween(2000, easing = EaseInOutCubic),
)
```

--------------------------------

### Configure Label Rotation

Source: https://github.com/ehsannarmani/composecharts/blob/master/document/docs/chart-properties/labels.md

Control how labels rotate to prevent overlap. Specify the rotation mode and degree, with optional padding for rotated labels.

```kotlin
val labelProperties = LabelProperties(
    enabled = true,
    textStyle = MaterialTheme.typography.labelSmall,
    verticalPadding = 16.dp,
    rotation = Rotation(
        mode = LabelProperties.Rotation.Mode.Force,
        degree = -45f
    )
)
```

--------------------------------

### Render Horizontal Bars with RowChart

Source: https://context7.com/ehsannarmani/composecharts/llms.txt

Use RowChart for ranked or comparative data where a horizontal layout is preferred. It supports negative values and custom bar properties.

```kotlin
import androidx.compose.animation.core.Spring
import androidx.compose.animation.core.spring
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.padding
import androidx.compose.runtime.Composable
import androidx.compose.runtime.remember
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Brush
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.graphics.SolidColor
import androidx.compose.ui.unit.dp
import ir.ehsannarmani.compose_charts.RowChart
import ir.ehsannarmani.compose_charts.models.*

@Composable
fun MyRowChart() {
    RowChart(
        modifier = Modifier.fillMaxSize().padding(horizontal = 22.dp),
        data = remember {
            listOf(
                Bars(
                    label = "Q1",
                    values = listOf(
                        Bars.Data(label = "Linux", value = 50.0,
                            color = Brush.verticalGradient(listOf(Color(0xFF66BB6A), Color(0xFF2E7D32)))),
                        Bars.Data(label = "Windows", value = 70.0, color = SolidColor(Color(0xFFEF5350)))
                    )
                ),
                Bars(
                    label = "Q2",
                    values = listOf(
                        Bars.Data(label = "Linux", value = 80.0,
                            color = Brush.verticalGradient(listOf(Color(0xFF66BB6A), Color(0xFF2E7D32)))),
                        Bars.Data(label = "Windows", value = -30.0, color = SolidColor(Color(0xFFEF5350)))
                    )
                ),
            )
        },
        barProperties = BarProperties(
            thickness = 20.dp,
            spacing = 3.dp,
            cornerRadius = Bars.Data.Radius.Rectangle(topRight = 6.dp, topLeft = 6.dp)
        ),
        animationSpec = spring(
            dampingRatio = Spring.DampingRatioMediumBouncy,
            stiffness = Spring.StiffnessLow
        ),
        maxValue = 100.0,
        minValue = -50.0,
        indicatorProperties = VerticalIndicatorProperties(
            position = IndicatorPosition.Vertical.Top,
            contentBuilder = { "%.0f".format(it) }
        )
    )
}
```

--------------------------------

### Row Chart Indicator Properties

Source: https://github.com/ehsannarmani/composecharts/blob/master/document/docs/chart-properties/indicators.md

Configure indicator properties for row charts. Use VerticalIndicatorProperties to set visibility, text style, count, position, padding, and content builder.

```kotlin
val indicatorProperties = VerticalIndicatorProperties(
            enabled = true,
            textStyle = MaterialTheme.typography.labelSmall,
            count = IndicatorCount.CountBased(count = 5),
            position = IndicatorPosition.Vertical.Top,
            padding = 32.dp,
            contentBuilder = { indicator ->
                "%.2f".format(indicator) + " Million"
            }
        )
```