This is a simple chart library built with Jetpack Compose.
Inspired by: https://github.com/AppPear/ChartView
Public API: https://dautovicharis.github.io/Charts/
- Animations
- M3 theme support
- Customizable chart styles
- Various data set support
Step 1. Add the JitPack repository to your build file
Add it in your settings.gradle.kts at the end of repositories:
dependencyResolutionManagement {
repositoriesMode.set(RepositoriesMode.FAIL_ON_PROJECT_REPOS)
repositories {
google()
mavenCentral()
maven(url = "https://jitpack.io")
}
}Step 2. Add the dependency
implementation("com.github.dautovicharis:Charts:{version}")🎨 Pie chart style options
@Composable
private fun AddDefaultPieChart() {
val dataSet = ChartDataSet(
items = listOf(8.0f, 23.0f, 54.0f, 32.0f, 12.0f, 37.0f, 7.0f, 23.0f, 43.0f),
title = stringResource(id = R.string.pie_chart),
postfix = " °C"
)
PieChartView(dataSet = dataSet)
}
@Composable
private fun AddCustomPieChart() {
val pieColors = listOf(
ColorPalette.DataColor.navyBlue,
ColorPalette.DataColor.darkBlue,
ColorPalette.DataColor.deepPurple,
ColorPalette.DataColor.magenta,
ColorPalette.DataColor.darkPink,
ColorPalette.DataColor.coral,
ColorPalette.DataColor.orange,
ColorPalette.DataColor.yellow
)
val style = PieChartDefaults.style(
borderColor = Color.White,
donutPercentage = 40f,
borderWidth = 6f,
pieColors = pieColors,
chartViewStyle = ChartViewDemoStyle.custom(width = 200.dp)
)
val dataSet = ChartDataSet(
items = listOf(60.0f, 25f, 15f, 14f, 30f, 30f, 20f, 30f),
title = stringResource(id = R.string.pie_chart),
postfix = " °C"
)
PieChartView(dataSet = dataSet, style = style)
}🎨 Line chart style options
@Composable
private fun AddDefaultLineChart() {
val dataSet = ChartDataSet(
items = listOf(
8f, 23f, 54f, 32f, 12f, 37f, 7f, 23f, 43f
),
title = stringResource(id = R.string.line_chart)
)
LineChartView(dataSet = dataSet)
}
@Composable
private fun AddCustomLineChart() {
val style = LineChartDefaults.style(
lineColor = ColorPalette.DataColor.deepPurple,
pointColor = ColorPalette.DataColor.magenta,
pointSize = 9f,
bezier = false,
dragPointColor = ColorPalette.DataColor.deepPurple,
dragPointVisible = false,
dragPointSize = 8f,
dragActivePointSize = 15f,
chartViewStyle = ChartViewDemoStyle.custom(width = 200.dp)
)
val dataSet = ChartDataSet(
items = listOf(10f, 100f, 20f, 50f, 150f, 70f, 10f, 20f, 40f),
title = stringResource(id = R.string.line_chart)
)
LineChartView(dataSet = dataSet, style = style)
}🎨 Multiline chart style options
@Composable
private fun AddDefaultMultiLineChart() {
val items = listOf(
"Cherry St." to listOf(26000.68f, 28000.34f, 32000.57f, 45000.57f),
"Strawberry Mall" to listOf(15261.68f, 17810.34f, 40000.57f, 85000f),
"Lime Av." to listOf(4000.87f, 5000.58f, 30245.81f, 135000.58f),
"Apple Rd." to listOf(1000.87f, 9000.58f, 16544.81f, 100444.87f)
)
val dataSet = MultiChartDataSet(
items = items,
prefix = "$",
categories = listOf("Jan", "Feb", "Mar", "Apr"),
title = stringResource(id = R.string.line_chart)
)
LineChartView(
dataSet = dataSet, style = MultiLineDemoStyle.default()
)
}
@Composable
private fun AddCustomMultiLineChart() {
val lineColors = listOf(ColorPalette.DataColor.navyBlue, ColorPalette.DataColor.darkBlue, ColorPalette.DataColor.deepPurple, ColorPalette.DataColor.magenta)
val style = LineChartDefaults.style(
lineColors = lineColors,
dragPointVisible = false,
pointVisible = true,
pointColor = ColorPalette.DataColor.magenta,
dragPointColor = ColorPalette.DataColor.deepPurple,
chartViewStyle = ChartViewDemoStyle.custom()
)
val items = listOf(
"Cherry St." to listOf(26000.68f, 28000.34f, 32000.57f, 45000.57f),
"Strawberry Mall" to listOf(15261.68f, 17810.34f, 40000.57f, 85000f),
"Lime Av." to listOf(4000.87f, 5000.58f, 30245.81f, 135000.58f),
"Apple Rd." to listOf(1000.87f, 9000.58f, 16544.81f, 100444.87f)
)
val dataSet = MultiChartDataSet(
items = items,
prefix = "$",
categories = listOf("Jan", "Feb", "Mar", "Apr"),
title = stringResource(id = R.string.line_chart)
)
LineChartView(dataSet = dataSet, style = style)
}🎨 Bar chart style options
@Composable
private fun AddDefaultBarChart() {
BarChartView(
dataSet = ChartDataSet(
items = listOf(100f, 50f, 5f, 60f, -50f, 50f, 60f),
title = stringResource(id = R.string.bar_chart)
)
)
}
@Composable
private fun AddCustomBarChart() {
val style = BarChartDefaults.style(
barColor = ColorPalette.DataColor.deepPurple,
space = 12.dp,
chartViewStyle = ChartViewDemoStyle.custom(width = 200.dp)
)
BarChartView(
dataSet = ChartDataSet(
items = listOf(100f, 50f, 5f, 60f, 1f, 30f, 50f, 35f, 50f, -100f),
title = stringResource(id = R.string.bar_chart)
),
style = style
)
}🎨 Stacked bar chart style options
@Composable
private fun AddDefaultStackedBarChart() {
val items = listOf(
"Cherry St." to listOf(8261.68f, 8810.34f, 30000.57f),
"Strawberry Mall" to listOf(8261.68f, 8810.34f, 30000.57f),
"Lime Av." to listOf(1500.87f, 2765.58f, 33245.81f),
"Apple Rd." to listOf(5444.87f, 233.58f, 67544.81f)
)
val dataSet = MultiChartDataSet(
items = items,
prefix = "$",
categories = listOf("Jan", "Feb", "Mar"),
title = stringResource(id = R.string.bar_stacked_chart)
)
StackedBarChartView(dataSet = dataSet)
}
@Composable
private fun AddCustomStackedBarChart() {
val colors = listOf(
ColorPalette.DataColor.navyBlue,ColorPalette.DataColor.darkBlue,ColorPalette.DataColor.deepPurple
)
val style = StackedBarChartDefaults.style(
barColors = colors,
chartViewStyle = ChartViewDemoStyle.custom(width = 240.dp)
)
val items = listOf(
"Cherry St." to listOf(8261.68f, 8810.34f, 30000.57f),
"Strawberry Mall" to listOf(8261.68f, 8810.34f, 30000.57f),
"Lime Av." to listOf(1500.87f, 2765.58f, 33245.81f),
"Apple Rd." to listOf(5444.87f, 233.58f, 67544.81f)
)
val dataSet = MultiChartDataSet(
items = items,
prefix = "$",
categories = listOf("Jan", "Feb", "Mar"),
title = stringResource(id = R.string.bar_stacked_chart)
)
StackedBarChartView(dataSet = dataSet, style = style)
}
🌟 Thank you for your time! Before you start working on code, please create a new issue.
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent