How to Draw Charts Using Jetpack Compose

by Sandeep Kumar -
How to Draw Charts Using Jetpack Compose

A chart is a visual representation of data, often used to make information easier to understand. Charts use symbols like bars, lines, or slices to represent data values.

Canvas in Jetpack Compose

Common Types of Charts:

  1. Bar Chart – Uses rectangular bars to compare different categories.
  2. Line Chart – Shows trends over time using a continuous line.
  3. Pie Chart – Displays proportions as slices of a circle.
  4. Scatter Plot – Represents relationships between two variables using dots.
  5. Histogram – Shows frequency distribution using bars.
  6. Radar Chart – Displays multivariate data in a circular format.
  7. Donut Chart - A Donut Chart is a variation of a Pie Chart with a hollow center. It is often used for percentage distributions, such as progress tracking, expense breakdowns, or analytics.
  8. Bubble Chart - A Bubble Chart is similar to a Scatter Plot, but the size of each bubble represents a third dimension of data.
  9. Gauge Chart - A Gauge Chart (also called a Speedometer Chart) is used to represent a value within a defined range. It’s often used in dashboards for progress tracking, performance metrics, or speed indicators.

How to draw Charts using Jetpack Compose without third party library

Bar Chart in Jetpack Compose

package com.codingbihar.jetpackcomposeskill

import android.graphics.Paint
import androidx.compose.foundation.Canvas
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.padding
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import androidx.compose.ui.geometry.Offset
import androidx.compose.ui.geometry.Size
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.graphics.nativeCanvas
import androidx.compose.ui.unit.dp

@Composable
fun MyCustomBarChart() {
    val barData = listOf(100f, 200f, 150f, 250f, 180f)
    val categories = listOf("Jan", "Feb", "Mar", "Apr", "May") // X-axis labels
    val maxYValue = 300f // Y-axis maximum value for scaling
    val barWidth = 80f
    val spaceBetweenBars = 50f

    Canvas(modifier = Modifier
        .fillMaxWidth()
        .height(350.dp)
        .padding(32.dp)) {

        val yAxisStep = 50f // Y-axis step size
        val scaleFactor = size.height / maxYValue
        val xOffset = 100f  // Space for Y-axis labels

        // 🎯 Draw Y-axis (vertical line)
        drawLine(
            color = Color.Black,
            start = Offset(xOffset, 0f),
            end = Offset(xOffset, size.height),
            strokeWidth = 5f
        )

        // 🎯 Draw Y-axis Labels
        for (y in 0..maxYValue.toInt() step yAxisStep.toInt()) {
            val yPos = size.height - (y * scaleFactor)
            drawContext.canvas.nativeCanvas.drawText(
                y.toString(),
                xOffset - 40, yPos,
                Paint().apply {
                    color = android.graphics.Color.BLACK
                    textSize = 30f
                    textAlign = Paint.Align.RIGHT
                }
            )
        }

        // 🎯 Draw Bars and X-axis labels
        barData.forEachIndexed { index, value ->
            val xPos = xOffset + (index * (barWidth + spaceBetweenBars))

            // 🟦 Draw Bar
            drawRect(
                color = Color.Red,
                topLeft = Offset(xPos, size.height - (value * scaleFactor)),
                size = Size(barWidth, value * scaleFactor)
            )

            // 🔤 Draw X-axis Labels
            drawContext.canvas.nativeCanvas.drawText(
                categories[index], // Label text
                xPos + (barWidth / 4), size.height + 40, // Adjust position
                Paint().apply {
                    color = android.graphics.Color.RED
                    textSize = 45f
                }
            )
        }

        // 🎯 Draw X-axis (horizontal line)
        drawLine(
            color = Color.Black,
            start = Offset(xOffset, size.height),
            end = Offset(size.width, size.height),
            strokeWidth = 5f
        )
    }
}

Result:

Chart Bar in Jetpack Compose Output


Explanation:

Canvas → A special Composable that lets you draw custom graphics.
fillMaxWidth() → Makes the canvas use the full width of the screen.
height(350.dp) → Sets a fixed height.
padding(32.dp) → Adds some space around the chart.
yAxisStep = 50f → Each step on the Y-axis represents 50 units.
scaleFactor = size.height / maxYValue → Converts data values into pixel height.
xOffset = 100f → Leaves space on the left for Y-axis labels.
Draws a black vertical line at xOffset = 100f, which represents the Y-axis.
Loop through each bar’s value (barData).
Calculate xPos, which is the position of each bar.
Draw the bar using drawRect().
Draw the corresponding month label below each bar.
Draws a black horizontal line at the bottom, representing the X-axis.
Reduced xOffset - 80 to xOffset - 50
This moves the text closer to the Y-axis without overlapping.
Set textAlign = Paint.Align.RIGHT
This ensures the right side of the text is aligned with xOffset - 50, making the labels properly positioned without overlapping the Y-axis.

Summary of Key Concepts

Canvas → Used to draw graphics in Jetpack Compose.
Scaling → Convert values (100, 200, etc.) into pixels using scaleFactor.
drawLine() → Used for drawing the Y-axis and X-axis.
drawRect() → Used to draw each bar.
drawText() → Used to label the Y-axis and X-axis.
Alignment Fix → We used Paint.Align.RIGHT to properly position Y-axis labels.

Line Chart in Jetpack Compose

package com.codingbihar.jetpackcomposeskill

import android.graphics.Paint
import androidx.compose.foundation.Canvas
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.padding
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import androidx.compose.ui.geometry.Offset
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.graphics.nativeCanvas
import androidx.compose.ui.unit.dp

@Composable
fun CustomLineChart() {
    val lineData = listOf(50f, 100f, 80f, 200f, 180f, 250f)
    val labelsX = listOf("Jan", "Feb", "Mar", "Apr", "May", "Jun") // X-axis labels

    Canvas(
        modifier = Modifier
            .fillMaxWidth()
            .height(300.dp)
            .padding(32.dp)
    ) {
        val maxDataValue = lineData.maxOrNull() ?: 1f
        val scaleFactor = size.height * 0.8f / maxDataValue // Scale for Y-axis with padding
        val pointSpacing = size.width / (lineData.size - 1)

     /*   val axisPaint = Paint().apply {
            color = android.graphics.Color.BLACK
            strokeWidth = 5f
        }*/
        val textPaint = Paint().apply {
            color = android.graphics.Color.BLACK
            textSize = 40f
            textAlign = Paint.Align.RIGHT
        }

        // Draw Y-axis (vertical)
        drawLine(
            color = Color.Black,
            start = Offset(50f, 0f),
            end = Offset(50f, size.height),
            strokeWidth = 5f
        )

        // Draw X-axis (horizontal)
        drawLine(
            color = Color.Black,
            start = Offset(50f, size.height - 50f),
            end = Offset(size.width, size.height - 50f),
            strokeWidth = 5f
        )

        var previousPoint: Offset? = null

        lineData.forEachIndexed { index, value ->
            val currentPoint = Offset(
                x = 50f + index * pointSpacing,
                y = (size.height - 50f) - (value * scaleFactor)
            )

            previousPoint?.let {
                drawLine(
                    color = Color.Red,
                    start = it,
                    end = currentPoint,
                    strokeWidth = 5f
                )
            }

            drawCircle(
                color = Color.Blue,
                radius = 8f,
                center = currentPoint
            )

            previousPoint = currentPoint

            // Draw X-axis labels
            drawContext.canvas.nativeCanvas.drawText(
                labelsX[index],
                currentPoint.x - 20f,
                size.height,
                textPaint
            )
        }

        // Draw Y-axis labels (scaled)
        val yStep = maxDataValue / 5
        for (i in 0..5) {
            val yValue = i * yStep
            val yOffset = (size.height - 50f) - (yValue * scaleFactor)
            drawContext.canvas.nativeCanvas.drawText(
                yValue.toInt().toString(),
                10f,
                yOffset,
                textPaint
            )
        }
    }
}

Result:

Output Line chart jetpack compose

Pie Chart in Jetpack Compose

Steps to Create a Pie Chart in Jetpack Compose

 Step 1: Create a @Composable function
 Step 2: Define data and colors
 Step 3: Set up the Canvas
 Step 4: Calculate start & sweep angles
 Step 5: Draw slices using drawArc()
  • Uses drawArc to create pie slices.
  • Dynamically calculates angles based on data.
  • Defined a radius: Ensures the pie chart fits within the canvas.
  • Used size.minDimension: Makes the chart responsive.
  • Centered the arc: Using topLeft offset.
  • Defined size for drawArc: Ensures proper rendering.
package com.codingbihar.jetpackcomposeskill

import androidx.compose.foundation.Canvas
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.size
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import androidx.compose.ui.geometry.Offset
import androidx.compose.ui.geometry.Size
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.unit.dp

@Composable
fun CustomPieChart() {
    val pieData = listOf(90f, 90f, 80f, 100f) // Percentage values
    val colors = listOf(Color.Red, Color.Blue, Color.Green, Color.Yellow)

    Canvas(modifier = Modifier
        .size(300.dp)
        .padding(16.dp)) {

        val total = pieData.sum()
        var startAngle = 0f
        val radius = size.minDimension / 2  // Ensure it fits within bounds
        val rectSize = Size(radius * 2, radius * 2)
        val topLeft = Offset((size.width - rectSize.width) / 2, (size.height - rectSize.height) / 2)

        pieData.forEachIndexed { index, value ->
            val sweepAngle = (value / total) * 360f

            drawArc(
                color = colors[index],
                startAngle = startAngle,
                sweepAngle = sweepAngle,
                useCenter = true,
                topLeft = topLeft,
                size = rectSize
            )

            startAngle += sweepAngle
        }
    }
}

Result:

Pie Chart in Jetpack Compose

Scatter Plot Chart in Jetpack Compose

Steps to Create a Scatter Plot in Jetpack Compose:

  1. Use Canvas to draw dots based on data points.
  2. Scale and transform data to fit within the canvas.
  3. Add axis labels for better readability.

@Composable
fun ScatterPlot(
    modifier: Modifier = Modifier,
    dataPoints: List<Pair<Float, Float>>
) {
    val padding = 100f  // Padding for the graph
    val pointRadius = 8f  // Size of dots
    val tickLength = 10f  // Length of tick marks
    val textPaint = android.graphics.Paint().apply {
        color = android.graphics.Color.BLACK
        textSize = 40f
    }

    Canvas(modifier = modifier.fillMaxSize()) {
        val xMax = dataPoints.maxOfOrNull { it.first } ?: 1f
        val yMax = dataPoints.maxOfOrNull { it.second } ?: 1f

        val width = size.width - 2 * padding
        val height = size.height - 2 * padding

        // Draw X and Y axes
        drawLine(
            color = Color.Black,
            start = Offset(padding, size.height - padding),
            end = Offset(size.width - padding, size.height - padding),
            strokeWidth = 5f
        )
        drawLine(
            color = Color.Black,
            start = Offset(padding, padding),
            end = Offset(padding, size.height - padding),
            strokeWidth = 5f
        )

        val xStep = width / xMax
        val yStep = height / yMax

        // Draw X-axis labels and tick marks
        for (i in 0..xMax.toInt()) {
            val xPos = padding + i * xStep
            // Draw tick mark
            drawLine(
                color = Color.Black,
                start = Offset(xPos, size.height - padding),
                end = Offset(xPos, size.height - padding + tickLength),
                strokeWidth = 3f
            )
            // Draw label
            drawContext.canvas.nativeCanvas.drawText(
                i.toString(),
                xPos - 10,  // Center text
                size.height - padding + 40,  // Positioned below X-axis
                textPaint
            )
        }

        // Draw Y-axis labels and tick marks
        for (i in 0..yMax.toInt()) {
            val yPos = size.height - padding - i * yStep
            // Draw tick mark
            drawLine(
                color = Color.Black,
                start = Offset(padding, yPos),
                end = Offset(padding - tickLength, yPos),
                strokeWidth = 3f
            )
            // Draw label
            drawContext.canvas.nativeCanvas.drawText(
                i.toString(),
                padding - 60,  // Positioned to the left of Y-axis
                yPos + 10,  // Adjust for text centering
                textPaint
            )
        }

        // Draw scatter points
        dataPoints.forEach { (x, y) ->
            val scaledX = padding + (x / xMax) * width
            val scaledY = size.height - padding - (y / yMax) * height

            drawCircle(
                color = Color.Blue,
                center = Offset(scaledX, scaledY),
                radius = pointRadius
            )
        }
    }
}

@Preview(showBackground = true)
@Composable
fun ScatterPlotPreview() {
    val dataPoints = listOf(
        1f to 3f, 2f to 5f, 3f to 2f, 4f to 8f, 5f to 6f,
        6f to 7f, 7f to 4f, 8f to 9f, 9f to 5f, 10f to 10f
    )

    ScatterPlot(
        modifier = Modifier
            .fillMaxSize()
            .padding(16.dp),
        dataPoints = dataPoints
    )
}

Result:

Scatter Plot Chart


Histogram Chart in Jetpack Compose

Steps to Create a Histogram in Jetpack Compose:

  1. Group data into bins (ranges).
  2. Count occurrences in each bin.
  3. Draw bars proportional to frequency.
  4. Scale values to fit the screen.

@Composable
fun HistogramChart(
    modifier: Modifier = Modifier,
    data: List<Float>,
    binCount: Int = 5 // Number of bins
) {
    val padding = 100f  // Padding for the graph
    val barColor = Color(0xFFE91E63)  // Bar color
    val tickLength = 10f  // Tick mark size

    val textPaint = Paint().apply {
        color = android.graphics.Color.BLACK
        textSize = 40f
    }

    Canvas(modifier = modifier.fillMaxSize()) {
        val width = size.width - 2 * padding
        val height = size.height - 2 * padding

        val minValue = data.minOrNull() ?: 0f
      //  val maxValue = data.maxOrNull() ?: 1f
        val binSize = (11 - minValue) / binCount

        // Group data into bins
        val bins = MutableList(binCount) { 0 }
        data.forEach { value ->
            val binIndex = ((value - minValue) / binSize).toInt().coerceIn(0, binCount - 1)
            bins[binIndex]++
        }

        val maxFrequency = bins.maxOrNull() ?: 1
        val barWidth = width / binCount

        // Draw X and Y axes
        drawLine(
            color = Color.Black,
            start = Offset(padding, size.height - padding),
            end = Offset(size.width - padding, size.height - padding),
            strokeWidth = 5f
        )
        drawLine(
            color = Color.Black,
            start = Offset(padding, padding),
            end = Offset(padding, size.height - padding),
            strokeWidth = 5f
        )

        val yStep = height / maxFrequency

        // Draw Y-axis labels and tick marks
        for (i in 0..maxFrequency) {
            val yPos = size.height - padding - i * yStep

            // Tick mark
            drawLine(
                color = Color.Black,
                start = Offset(padding, yPos),
                end = Offset(padding - tickLength, yPos),
                strokeWidth = 3f
            )

            // Label
            drawContext.canvas.nativeCanvas.drawText(
                i.toString(),
                padding - 60,
                yPos + 10,
                textPaint
            )
        }

        // Draw X-axis labels and tick marks
        for (i in 0 until binCount) {
            val xPos = padding + i * barWidth + (barWidth / 2)
            val binRange = "${"%.1f".format(minValue + i * binSize)}-${"%.1f".format(minValue + (i + 1) * binSize)}"

            // Tick mark
            drawLine(
                color = Color.Black,
                start = Offset(xPos, size.height - padding),
                end = Offset(xPos, size.height - padding + tickLength),
                strokeWidth = 3f
            )

            // Label
            drawContext.canvas.nativeCanvas.drawText(
                binRange,
                xPos - 40,  // Center text
                size.height - padding + 40,  // Below X-axis
                textPaint
            )
        }

        // Draw bars
        bins.forEachIndexed { index, frequency ->
            val barHeight = (frequency.toFloat() / maxFrequency) * height
            val left = padding + index * barWidth
            val top = size.height - padding - barHeight

            drawRect(
                color = barColor,
                topLeft = Offset(left, top),
                size = Size(barWidth - 10, barHeight)
            )
        }
    }
}

@Preview(showBackground = true)
@Composable
fun HistogramChartPreview() {
    val sampleData = listOf(1f, 2f, 2f, 3f, 3.5f, 3.8f, 4.2f, 4.8f, 5f, 5.3f, 6f, 6.7f, 7f, 7.8f, 8.5f, 9f, 10f)

    HistogramChart(
        modifier = Modifier
            .fillMaxSize()
            .padding(16.dp),
        data = sampleData,
        binCount = 5
    )
}

Result:

Histogram in Jetpack Compose


Radar Chart in Jetpack Compose

Steps to Create a Radar Chart in Jetpack Compose:

  1. Define categories (axes) for the data.
  2. Scale values to fit within the chart.
  3. Draw the chart grid (spokes and circles).
  4. Plot data points and connect them.

@Composable
fun RadarChart(
    modifier: Modifier = Modifier,
    data: List<Float>,
    labels: List<String>,
    maxValue: Float = 10f
) {
    val numAxes = data.size
    val center = Offset(0f, 0f)
    val radius = 200f  // Chart size
    val step = radius / maxValue
    val angleStep = (2 * Math.PI / numAxes).toFloat()

    Canvas(modifier = modifier.fillMaxSize()) {
        translate(size.width / 2, size.height / 2) {
            // Draw circular grid
            for (i in 1..maxValue.toInt()) {
                drawCircle(
                    color = Color.Gray.copy(alpha = 0.3f),
                    radius = i * step,
                    style = Stroke(1f)
                )
            }

            // Draw axes (spokes)
            for (i in 0 until numAxes) {
                val angle = i * angleStep
                val endX = radius * cos(angle)
                val endY = radius * sin(angle)

                drawLine(
                    color = Color.Gray,
                    start = center,
                    end = Offset(endX, endY),
                    strokeWidth = 2f
                )

                // Draw labels
                drawContext.canvas.nativeCanvas.apply {
                    drawText(
                        labels[i],
                        endX + (if (endX > 0) 20 else -60),
                        endY + (if (endY > 0) 30 else -10),
                        android.graphics.Paint().apply {
                            color = android.graphics.Color.BLACK
                            textSize = 30f
                        }
                    )
                }
            }

            // Plot Data Points
            val points = data.mapIndexed { i, value ->
                val angle = i * angleStep
                Offset(value * step * cos(angle), value * step * sin(angle))
            }

            // Connect Points (Polygon)
            points.zipWithNext().forEach { (p1, p2) ->
                drawLine(color = Color.Blue, start = p1, end = p2, strokeWidth = 4f)
            }
            drawLine(color = Color.Blue, start = points.last(), end = points.first(), strokeWidth = 4f)

            // Draw Circles at Data Points
            points.forEach { point ->
                drawCircle(color = Color.Red, center = point, radius = 8f)
            }
        }
    }
}

@Preview(showBackground = true)
@Composable
fun RadarChartPreview() {
    val dataValues = listOf(7f, 5f, 8f, 6f, 9f)
    val labels = listOf("Speed", "Strength", "Agility", "Endurance", "Flexibility")

    RadarChart(
        modifier = Modifier
            .fillMaxSize()
            .padding(16.dp),
        data = dataValues,
        labels = labels,
        maxValue = 10f
    )
}

Result:

Radar Chart in Jetpack Compose


Donut Chart in Jetpack Compose

Steps to Create a Donut Chart in Jetpack Compose:

  1. Define data values and calculate their proportions.
  2. Use drawArc() to draw segments.
  3. Create a hole in the center using another drawCircle().
  4. Animate the chart for a smooth effect (optional).

@Composable
fun DonutChart(
    modifier: Modifier = Modifier,
    data: List<Pair<String, Float>>,  // Label and Value
    colors: List<Color> = listOf(Color.Blue, Color.Green, Color.Red, Color.Yellow, Color.Cyan)
) {
    val total = data.sumOf { it.second.toDouble() }.toFloat()
    var startAngle = -90f  // Start at the top

    Canvas(modifier = modifier.fillMaxSize()) {
        val size = min(size.width, size.height) * 0.8f
        val radius = size / 2
        val thickness = radius * 0.4f  // Donut thickness

        data.forEachIndexed { index, (_, value) ->
            val sweepAngle = (value / total) * 360f
            drawArc(
                color = colors[index % colors.size],
                startAngle = startAngle,
                sweepAngle = sweepAngle,
                useCenter = false,
                topLeft = Offset(center.x - radius, center.y - radius),
                size = Size(radius * 2, radius * 2),
                style = Stroke(thickness, cap = StrokeCap.Butt)
            )
            startAngle += sweepAngle
        }

        // Draw Center Hole (Making it a Donut)
        drawCircle(
            color = Color.White, // Background color to create the hole
            center = center,
            radius = radius * 0.6f
        )
    }
}

@Preview(showBackground = true)
@Composable
fun DonutChartPreview() {
    val data = listOf(
        "Food" to 30f,
        "Rent" to 25f,
        "Entertainment" to 15f,
        "Savings" to 20f,
        "Misc" to 10f
    )

    DonutChart(
        modifier = Modifier
            .size(300.dp)
            .padding(16.dp),
        data = data
    )
}

Result:

Donut Chart in Jetpack Compose


Bubble chart in Jetpack Compose

Steps to Create a Bubble Chart in Jetpack Compose:

  1. Define (x, y) coordinates for positioning.
  2. Use a third variable for bubble size.
  3. Scale the data to fit within the Canvas.
  4. Draw circles (drawCircle()) at each (x, y) point.

@Composable
fun BubbleChart(
    modifier: Modifier = Modifier,
    data: List<Triple<Float, Float, String>> // (X, Y, Label)
) {
    val padding = 100f
    val tickLength = 10f
    val textPaint = Paint().apply {
        color = android.graphics.Color.BLACK
        textSize = 40f
        textAlign = Paint.Align.CENTER
    }

    val maxX = data.maxOfOrNull { it.first } ?: 1f
    val maxY = data.maxOfOrNull { it.second } ?: 1f

    Canvas(modifier = modifier.fillMaxSize()) {
        val width = size.width - 2 * padding
        val height = size.height - 2 * padding

        // Draw X and Y axes
        drawLine(
            color = Color.Black,
            start = Offset(padding, size.height - padding),
            end = Offset(size.width - padding, size.height - padding),
            strokeWidth = 5f
        )
        drawLine(
            color = Color.Black,
            start = Offset(padding, padding),
            end = Offset(padding, size.height - padding),
            strokeWidth = 5f
        )

        val xStep = width / maxX
        val yStep = height / maxY

        // Draw X-axis labels and tick marks
        for (i in 0..maxX.toInt()) {
            val xPos = padding + i * xStep
            drawLine(
                color = Color.Black,
                start = Offset(xPos, size.height - padding),
                end = Offset(xPos, size.height - padding + tickLength),
                strokeWidth = 3f
            )
            drawContext.canvas.nativeCanvas.drawText(
                i.toString(),
                xPos,
                size.height - padding + 40,
                textPaint
            )
        }

        // Draw Y-axis labels and tick marks
        for (i in 0..maxY.toInt()) {
            val yPos = size.height - padding - i * yStep
            drawLine(
                color = Color.Black,
                start = Offset(padding, yPos),
                end = Offset(padding - tickLength, yPos),
                strokeWidth = 3f
            )
            drawContext.canvas.nativeCanvas.drawText(
                i.toString(),
                padding - 50,
                yPos + 10,
                textPaint
            )
        }

        // Draw bubbles with labels
        data.forEach { (x, y, label) ->
            val scaledX = padding + (x / maxX) * width
            val scaledY = size.height - padding - (y / maxY) * height
            val bubbleRadius = 30f

            drawCircle(
                color = Color.Blue.copy(alpha = 0.6f),
                center = Offset(scaledX, scaledY),
                radius = bubbleRadius
            )

            // Draw bubble label above each bubble
            drawContext.canvas.nativeCanvas.drawText(
                label,
                scaledX,
                scaledY - bubbleRadius - 10,  // Position label above bubble
                textPaint
            )
        }
    }
}

@Preview(showBackground = true)
@Composable
fun BubbleChartPreview() {
    val bubbleData = listOf(
        Triple(1f, 3f, "(1,3)"),
        Triple(2f, 5f, "(2,5)"),
        Triple(3f, 2f, "(3,2)"),
        Triple(4f, 8f, "(4,8)"),
        Triple(5f, 6f, "(5,6)"),
        Triple(6f, 7f, "(6,7)"),
        Triple(7f, 4f, "(7,4)"),
        Triple(8f, 9f, "(8,9)"),
        Triple(9f, 5f, "(9,5)"),
        Triple(10f, 10f, "(10,10)")
    )

    BubbleChart(
        modifier = Modifier
            .fillMaxSize()
            .padding(16.dp),
        data = bubbleData
    )
}

Result:

Bubble Chart in Jetpack Compose


Gauge Chart in Jetpack Compose

Steps to Create a Gauge Chart in Jetpack Compose

  1. Define a min & max value to represent the range.
  2. Use drawArc() to create the gauge background.
  3. Use drawLine() or drawArc() to create a needle pointer.
  4. Scale the input value to the gauge range.
  5. Add animations for a smooth effect.

@Composable
fun GaugeChart(
    modifier: Modifier = Modifier,
    value: Float, // Current value
    minValue: Float = 0f, // Minimum range
    maxValue: Float = 100f // Maximum range
) {
    val sweepAngle = 180f  // Half-circle gauge
    val startAngle = 180f  // Start from left
    val animatedValue by animateFloatAsState(
        targetValue = value,
        animationSpec = tween(durationMillis = 1000, easing = FastOutSlowInEasing),
        label = "Gauge Animation"
    )

    Canvas(modifier = modifier.fillMaxSize()) {
        val centerX = size.width / 2
        val centerY = size.height * 0.8f  // Lower part of canvas
        val radius = size.width * 0.4f
        val strokeWidth = 30f

        // Gradient color from Green → Yellow → Red
        val gradient = Brush.sweepGradient(
            listOf(Color.Green, Color.Yellow, Color.Red)
        )

        // Draw Gauge Background
        drawArc(
            brush = Brush.sweepGradient(listOf(Color.Gray, Color.Gray.copy(alpha = 0.5f))),
            startAngle = startAngle,
            sweepAngle = sweepAngle,
            useCenter = false,
            size = Size(radius * 2, radius * 2),
            topLeft = Offset(centerX - radius, centerY - radius),
            style = Stroke(width = strokeWidth, cap = StrokeCap.Round)
        )

        // Draw Gradient Progress Arc
        val progressAngle = ((animatedValue - minValue) / (maxValue - minValue)) * sweepAngle
        drawArc(
            brush = gradient,
            startAngle = startAngle,
            sweepAngle = progressAngle,
            useCenter = false,
            size = Size(radius * 2, radius * 2),
            topLeft = Offset(centerX - radius, centerY - radius),
            style = Stroke(width = strokeWidth, cap = StrokeCap.Round)
        )

        // Draw Tick Marks (Divisions)
        for (i in 0..10) {
            val tickAngle = startAngle + (i / 10f) * sweepAngle
            val angleRad = (tickAngle * (PI / 180)).toFloat()
            val tickStartX = centerX + cos(angleRad) * (radius - strokeWidth / 2)
            val tickStartY = centerY + sin(angleRad) * (radius - strokeWidth / 2)
            val tickEndX = centerX + cos(angleRad) * (radius - strokeWidth * 1.5f)
            val tickEndY = centerY + sin(angleRad) * (radius - strokeWidth * 1.5f)

            drawLine(
                color = Color.Black,
                start = Offset(tickStartX, tickStartY),
                end = Offset(tickEndX, tickEndY),
                strokeWidth = 3f
            )
        }

        // Draw Needle (Pointer)
        val needleAngle = (progressAngle + startAngle) * (PI / 180).toFloat()
        val needleLength = radius * 0.8f
        val needleX = centerX + cos(needleAngle) * needleLength
        val needleY = centerY + sin(needleAngle) * needleLength

        drawLine(
            color = Color.Red,
            start = Offset(centerX, centerY),
            end = Offset(needleX, needleY),
            strokeWidth = 8f,
            cap = StrokeCap.Round
        )

        // Draw Center Dot
        drawCircle(color = Color.Black, center = Offset(centerX, centerY), radius = 12f)

        // Draw Min & Max Labels
        drawContext.canvas.nativeCanvas.apply {
            val textPaint = Paint().apply {
                color = android.graphics.Color.BLACK
                textSize = 40f
                textAlign = Paint.Align.CENTER
                typeface = Typeface.create(Typeface.DEFAULT, Typeface.BOLD)
            }
            val textPaintValue = Paint().apply {
                color = android.graphics.Color.RED
                textSize = 60f
                textAlign = Paint.Align.CENTER
                typeface = Typeface.create(Typeface.DEFAULT, Typeface.BOLD)
            }

            drawText(minValue.toInt().toString(), centerX - radius + 30f, centerY + 30f, textPaint)
            drawText(maxValue.toInt().toString(), centerX + radius - 30f, centerY + 30f, textPaint)
            drawText(value.toInt().toString(), centerX, centerY - radius + 50f, textPaintValue) // Current value
        }
    }
}

@Preview(showBackground = true)
@Composable
fun GaugeChartPreview() {
    var progress by remember { mutableFloatStateOf(50f) }

    Column(
        modifier = Modifier.fillMaxSize(),
        verticalArrangement = Arrangement.Center,
        horizontalAlignment = Alignment.CenterHorizontally
    ) {
        GaugeChart(
            modifier = Modifier
                .size(300.dp)
                .padding(16.dp),
            value = progress
        )

        Spacer(modifier = Modifier.height(20.dp))

        // Slider to control value
        Slider(
            value = progress,
            onValueChange = { progress = it },
            valueRange = 0f..100f
        )
    }
}

Result:


Tags
Previous Post Next Post

Contact Form