Interactive, highly configurable chart components offering a wide range of chart types, per-chart style/data configuration objects, shared tooltip and legend systems, accessibility helpers, sample screens, and scaffold/card wrappers.
Compose Super Charts is a Kotlin Multiplatform charting library built with Compose. It keeps chart APIs readable, puts styling into configuration objects, and shares chart components across Android, iOS, and desktop targets.
The library is being prepared for release. The sample app is the quickest way to explore the available charts, compare behavior across platforms, and find useful areas to contribute.
| Chart | Supports |
|---|---|
| Line chart | Multiple series, solid/dashed lines, solid/hollow points, optional area fill, tappable legends, tooltips, scrolling, label rotation, value formatting |
| Area chart | Filled line chart behavior with the same data model and styling approach as line charts |
| Column chart | Standard, clustered, and stacked columns, top/bottom x-axis, tappable legends, value labels, scrolling, rotated labels, tooltips |
| Bar chart | Standard, clustered, and stacked horizontal bars, left/right y-axis, tappable legends, value labels, scrolling, tooltips |
| Pie chart | Pie and doughnut styles, center label/value, slice spacing, active slice offset, legends, labels, tooltips |
| Combined chart | Column and line values in one view for comparing two related measures |
| Range chart | Horizontal start/end ranges for timelines, schedules, and interval data |
| Pyramid chart | Pyramid and funnel layouts, segment labels, legends, tooltips |
| Gauge chart | Configurable arc range, value arc animation, needle, labels, tooltip support |
| Bubble chart |
compose-super-charts/
compose-super-charts/ Core chart library module
sample-app/ Shared Android/iOS sample app
sample-desktop/ Desktop sample launcher
iosApp/ Xcode project for the iOS sample
Library code is grouped by responsibility:
components/atoms/ Small reusable UI pieces
components/molecules/ Shared chart pieces such as legends, tooltips, slots, cards, and state views
components/organisms/ Complete chart composables
models/ Data and style configuration objects
utils/ Accessibility, formatting, modifiers, and export helpers
domain/ Chart math helpers
From the repository root:
./gradlew :compose-super-charts:compileDebugKotlinAndroid
./gradlew :sample-app:compileDebugKotlinAndroid
./gradlew :sample-app:compileKotlinDesktop
Run the desktop sample:
./gradlew :sample-desktop:run
Install the Android sample:
./gradlew :sample-app:installDebug
Open the iOS sample from iosApp/iosApp.xcodeproj after the Kotlin Multiplatform project has synced.
After the first Maven Central release is available, add:
dependencies {
implementation("io.github.kotalsumit:compose-super-charts:1.1.1")
}
Until the Maven Central publication is live, add the module locally:
include(":compose-super-charts")
Then depend on it from your Compose module:
dependencies {
implementation(project(":compose-super-charts"))
}
The library is configured for Maven Central publishing through the Central Portal.
Before publishing, create and verify the io.github.kotalsumit namespace in Maven Central, then add these GitHub Actions secrets:
MAVEN_CENTRAL_USERNAME
MAVEN_CENTRAL_PASSWORD
SIGNING_PASSWORD
GPG_KEY_CONTENTS_BASE64
The release workflow runs when a GitHub release is published. It uploads artifacts to Maven Central, where the deployment can be reviewed and released.
For product UIs that need their own tooltip or legend presentation, pass tooltipContent, legendItemRenderer, or legendMarkerRenderer in ChartStyleConfig. These hooks are optional; the built-in tooltip and legend remain the default.
Use ChartScaffold when the chart needs local header, footer, or overlay content without creating another app-side wrapper. Use AnalyticsChartCard when a product screen wants a reusable card with a title, summary value, action slot, and chart content.
Use tick providers only when the default evenly spaced ticks are not enough. Formatters control labels; providers control the actual values shown on the axis.
Small, focused pull requests are easiest to review. Before opening one:
When adding a chart, follow the existing shape:
Apache License 2.0. See LICENSE.
| Bubble position, size, color, zoom, scroll, grid lines, rotated labels, tooltips |
| Scatter chart | Multiple series, per-point styling, zoom, scroll, grid lines, crosshair, tooltips |
| Heatmap | Row/column cells, color interpolation, zoom, scroll, rotated column labels, tooltips |
| Radar chart | Single or multiple series, polygon/circle web, animated drawing, point tooltips |
| Candlestick chart | OHLC rendering, bullish/bearish styling, optional scrolling, configurable candle width, OHLC tooltips |
| Venn diagram | Set circles, intersections, labels, animated rendering, tooltips |
ChartScaffold and AnalyticsChartCard wrappers for chart headers, overlays, footers, summary values, and product-specific actions.ChartDisplayState and ChartStateView.val points = listOf(
ChartPointData(
xLabel = "Mon",
yValues = listOf(24f),
highlightLabels = listOf(TooltipBubbleData("Sales", "24"))
),
ChartPointData(
xLabel = "Tue",
yValues = listOf(42f),
highlightLabels = listOf(TooltipBubbleData("Sales", "42"))
),
ChartPointData(
xLabel = "Wed",
yValues = listOf(31f),
highlightLabels = listOf(TooltipBubbleData("Sales", "31"))
)
)
LineChart(
modifier = Modifier
.fillMaxWidth()
.height(300.dp),
points = points,
maxY = 5,
yAxisLabel = "Sales",
legendLabels = listOf("Revenue"),
config = ChartStyleConfig(
lines = listOf(
ChartLineConfig(
lineStyle = SolidLine(color = Color(0xFF2563EB)),
pointStyle = SolidPoint()
)
),
legendPosition = LegendPosition.BOTTOM,
legendContentAlignment = LegendContentAlignment.START,
legendContentPadding = PaddingValues(horizontal = 0.dp),
legendLayoutMode = LegendLayoutMode.ROW,
xAxisLabelRotation = -35f,
tooltipAnchor = TooltipAnchor.POINT_TOP,
tooltipOverflowStrategy = TooltipOverflowStrategy.SHIFT_INSIDE,
nullPointBehavior = NullPointBehavior.BreakSegment,
areaFillBehavior = AreaFillBehavior.CloseToBaselinePerSegment,
yAxisTickFormatter = { value -> value.toInt().toString() },
yAxisTickProvider = { _, _ -> listOf(30f, 20f, 10f) },
tooltipValueFormatter = { value -> "${value.toInt()} units" },
showTooltipCloseButton = true,
tooltipAutoDismissMs = 2500
)
)
models/.models/.components/organisms/.TooltipBubble, UniversalLegend, ChartText, and ChartDivider when possible.ChartAccessibility.Surfaced from shared tags and platforms — no rankings paid for.