MPAndroidChart-Compose

A Jetpack Compose chart library for Android. Pure Kotlin, pure Compose — no legacy Views, no AndroidView wrappers, no Canvas interop.

Based on the original MPAndroidChart by Philipp Jahoda, rewritten on top of Compose Foundation Canvas.

4.0.0 is a breaking change. The View-based API from 3.x (LineChart(context), LineDataSet(entries, label), etc.) has been removed. If you need the legacy API, pin to v3.2.1 or use the upstream library.

Support This Project

If you find this library useful, please consider giving it a star! Your support helps keep this project alive and motivates continued development and maintenance.

Table of Contents

1. Support This Project
2. Quick Start
   1. Gradle Setup
   2. Maven Setup
   3. Your First Chart
3. Supported Chart Types
4. Features
5. Examples
6. Migrating from 3.x
7. Questions & Issues
8. License
9. Credits

Quick Start

Gradle Setup

Add JitPack repository to your settings.gradle or root build.gradle:

dependencyResolutionManagement {
    repositories {
        maven { url 'https://jitpack.io' }
    }
}

Add the dependency to your module's build.gradle:

dependencies {
    implementation 'com.github.Amir-yazdanmanesh:MPAndroidChart-Compose:v4.0.0'
}

Minimum supported: Android API 21, Kotlin 1.9+, Compose BOM 2024.02.00 or newer.

Maven Setup

<!-- <repositories> section of pom.xml -->
<repository>
    <id>jitpack.io</id>
    <url>https://jitpack.io</url>
</repository>

<!-- <dependencies> section of pom.xml -->
<dependency>
    <groupId>com.github.Amir-yazdanmanesh</groupId>
    <artifactId>MPAndroidChart-Compose</artifactId>
    <version>v4.0.0</version>
</dependency>

Your First Chart

import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.runtime.Composable
import androidx.compose.runtime.getValue
import androidx.compose.runtime.remember
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.unit.dp
import com.github.mikephil.charting.compose.animation.rememberChartAnimation
import com.github.mikephil.charting.compose.charts.LineChart
import com.github.mikephil.charting.compose.components.MarkerConfig
import com.github.mikephil.charting.compose.components.XAxisConfig
import com.github.mikephil.charting.compose.components.XAxisPosition
import com.github.mikephil.charting.compose.data.CircleConfig
import com.github.mikephil.charting.compose.data.Entry
import com.github.mikephil.charting.compose.data.LineData
import com.github.mikephil.charting.compose.data.LineDataSet
import com.github.mikephil.charting.compose.data.LineMode
import com.github.mikephil.charting.compose.gesture.rememberChartGestureState

@Composable
fun SalesChart() {
    val data = remember {
        LineData(
            LineDataSet(
                entries = listOf(
                    Entry(0f, 12f), Entry(1f, 18f), Entry(2f, 15f),
                    Entry(3f, 24f), Entry(4f, 21f), Entry(5f, 30f)
                ),
                label = "Weekly Sales",
                colors = listOf(Color(0xFF2196F3)),
                lineWidth = 2.dp,
                mode = LineMode.CUBIC_BEZIER,
                circle = CircleConfig(radius = 4.dp, colors = listOf(Color(0xFF2196F3)))
            )
        )
    }
    val gestureState = rememberChartGestureState()
    val progress by rememberChartAnimation(durationMillis = 1500)

    LineChart(
        data = data,
        modifier = Modifier.fillMaxSize(),
        xAxis = XAxisConfig(position = XAxisPosition.BOTTOM),
        animationProgress = progress,
        gestureState = gestureState,
        marker = MarkerConfig()
    )
}

Pass a gestureState to enable tap-to-highlight, pinch-zoom, and pan. Pass marker to show a tooltip at the highlighted point.

Supported Chart Types

Composable	Purpose
LineChart	Single or multi-line, linear / stepped / cubic / horizontal bezier
BarChart	Vertical bars, grouped or stacked
HorizontalBarChart	Horizontal bars
PieChart	Pie / donut / half-pie with optional center text
ScatterChart	Square / circle / triangle / cross / X / chevron markers
BubbleChart	Scatter with per-entry bubble size
CandleStickChart	OHLC financial chart
RadarChart	Spider / web chart
CombinedChart	Overlay bar, line, scatter, candle, bubble layers with configurable draw order

Features

• Pure Compose Canvas rendering — no AndroidView, no View subclass.
• Immutable data model — LineData, BarData, etc. are data classes. Build via remember(...) and the chart recomposes automatically when inputs change.
• Built-in gestures — rememberChartGestureState() + the gestureState parameter on each chart unlocks pinch-zoom, drag-to-pan, double-tap-to-zoom, tap-to-highlight, and (for PieChart / RadarChart) rotation.
• Highlight + marker — Pass a MarkerConfig (or a custom MarkerContentProvider) for tap tooltips. HighlightIndicatorConfig controls the crosshair.
• Animations — rememberChartAnimation, rememberChartAnimationX, rememberChartAnimationY, and rememberChartAnimationXY with 30+ easing curves in ChartEasing.
• Limit lines, dashed grids, gradient fills — Configured per axis or per dataset; FillConfig accepts a Compose Brush for gradients and a FillBaselineFormatter for custom fill anchors.

Examples

The MPChartExample module contains a full Compose app with 30+ chart variants: dual-axis lines, stacked bars, half-pie, dynamic/realtime updates, and more. Each screen is a single composable backed by ChartScaffold — useful as copy-paste recipes.

Migrating from 3.x

If you were on v3.2.1 or earlier you were using the View-based MPAndroidChart API. The 4.0 surface is intentionally different — there is no drop-in compatibility shim.

3.x (View API)	4.x (Compose API)
LineChart(context).apply { … } inside AndroidView	LineChart(data = …, modifier = …) composable
LineDataSet(entries, "label").apply { color = … }	LineDataSet(entries = …, label = "…", colors = listOf(…)) data class
chart.animateX(1500)	val progress by rememberChartAnimation(1500) + animationProgress = progress
chart.setTouchEnabled(true); chart.setScaleEnabled(true)	gestureState = rememberChartGestureState()
IFillFormatter { _, dp -> dp.yChartMin }	FillConfig(baselineFormatter = { _, yMin, _ -> yMin })
IAxisValueFormatter	AxisValueFormatter { value -> … }
Mutate set.values = … then notifyDataSetChanged()	Rebuild data inside remember(key) { LineData(…) }

For dynamic/realtime charts, back the entries with mutableStateListOf<Entry>() and rebuild the LineDataSet from entries.toList() on each recomposition — Compose handles the rest.

If you need the legacy View API, pin to com.github.Amir-yazdanmanesh:MPAndroidChart-Compose:v3.2.1 or use the upstream PhilJay/MPAndroidChart.

Questions & Issues

This repository's issue tracker is for bugs and feature requests against the Compose API.

For questions about the legacy 3.x View API, please use the original MPAndroidChart project or the mpandroidchart tag on stackoverflow.com.

License

Copyright 2020 Philipp Jahoda Copyright 2025 Amir Yazdanmanesh (Compose port)

Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at

http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License.

Credits

Based on the original MPAndroidChart by Philipp Jahoda.

Special thanks to:

• danielgindi - Daniel Gindi
• mikegr - Michael Greifeneder