Code Examples
Pie Chart
@Composable
private fun AddDefaultPieChart() {
val dataSet = listOf(8.0f, 23.0f, 54.0f, 32.0f, 12.0f, 37.0f, 7.0f, 23.0f, 43.0f)
.toChartDataSet(
title = stringResource(R.string.pie_chart),
postfix = " °C"
)
PieChart(dataSet)
}Line Chart
@Composable
private fun AddDefaultLineChart() {
val dataSet = listOf(
8f, 23f, 54f, 32f, 12f, 37f, 7f, 23f, 43f
).toChartDataSet(
title = stringResource(R.string.line_chart)
)
LineChart(dataSet)
}MultiLine Chart
@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 = items.toMultiChartDataSet(
title = stringResource(R.string.line_chart),
prefix = "$",
categories = listOf("Jan", "Feb", "Mar", "Apr")
)
LineChart(dataSet)
}Bar Chart
@Composable
private fun AddDefaultBarChart() {
BarChart(
dataSet = listOf(100f, 50f, 5f, 60f, -50f, 50f, 60f)
.toChartDataSet(
title = stringResource(R.string.bar_chart),
prefix = "$"
)
)
}Stacked Bar Chart
@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 = items.toMultiChartDataSet(
title = stringResource(R.string.bar_chart),
prefix = "$",
categories = listOf("Jan", "Feb", "Mar")
)
StackedBarChart(dataSet)
}Stacked Area Chart
@Composable
private fun AddDefaultStackedAreaChart() {
val items = listOf(
"Cherry St." to listOf(16000.68f, 19000.34f, 24000.57f, 28000.57f),
"Strawberry Mall" to listOf(11000.68f, 15000.34f, 19000.57f, 23000f),
"Lime Av." to listOf(7000.87f, 9000.58f, 13000.81f, 15500.58f)
)
val dataSet = items.toMultiChartDataSet(
title = stringResource(R.string.stacked_area_chart),
prefix = "$",
categories = listOf("Jan", "Feb", "Mar", "Apr")
)
StackedAreaChart(dataSet)
}Radar Chart
@Composable
private fun AddDefaultRadarChart() {
val categories = listOf("Speed", "Strength", "Agility", "Stamina", "Skill", "Luck")
val dataSet = listOf(78f, 62f, 90f, 55f, 70f, 80f)
.toChartDataSet(
title = stringResource(R.string.radar_chart),
labels = categories
)
RadarChart(dataSet)
}Customizing Chart Styles
Use each chart's *ChartDefaults.style(...) factory to create a customized style:
Pie Chart
@Composable
private fun AddCustomPieChart() {
val pieColors = listOf(
navyBlue, darkBlue, deepPurple, magenta, darkPink, coral, orange, yellow
)
val style = PieChartDefaults.style(
borderColor = Color.White,
donutPercentage = 40f,
borderWidth = 6f,
pieColors = pieColors,
chartViewStyle = ChartViewDefaults.style(width = 200.dp)
)
val dataSet = listOf(8, 23, 54, 32, 12, 37, 7, 23, 43)
.toChartDataSet(
title = stringResource(R.string.pie_chart),
postfix = " °C"
)
PieChart(dataSet = dataSet, style = style)
}Line Chart
@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 = ChartViewDefaults.style(width = 200.dp)
)
val dataSet = listOf("10", "100", "20", "50", "150", "70", "10", "20", "40")
.toChartDataSet(
title = stringResource(R.string.line_chart)
)
LineChart(dataSet = dataSet, style = style)
}MultiLine Chart
@Composable
private fun AddCustomMultiLineChart() {
val lineColors = listOf(
navyBlue, darkBlue, deepPurple, magenta
)
val style = LineChartDefaults.style(
lineColors = lineColors,
dragPointVisible = false,
pointVisible = true,
pointColor = ColorPalette.DataColor.magenta,
dragPointColor = deepPurple,
chartViewStyle = ChartViewDefaults.style()
)
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 = items.toMultiChartDataSet(
title = stringResource(R.string.line_chart),
prefix = "$",
categories = listOf("Jan", "Feb", "Mar", "Apr")
)
LineChart(dataSet = dataSet, style = style)
}Bar Chart
@Composable
private fun AddCustomBarChart() {
val style = BarChartDefaults.style(
barColor = ColorPalette.DataColor.deepPurple,
space = 12.dp,
chartViewStyle = ChartViewDefaults.style(width = 200.dp)
)
BarChart(
dataSet = listOf(100f, 50f, 5f, 60f, 1f, 30f, 50f, 35f, 50f, -100f)
.toChartDataSet(title = stringResource(R.string.bar_chart)),
style = style
)
}Stacked Bar Chart
@Composable
private fun AddCustomStackedBarChart() {
val colors = listOf(navyBlue, darkBlue, deepPurple)
val style = StackedBarChartDefaults.style(
barColors = colors,
chartViewStyle = ChartViewDefaults.style(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 = items.toMultiChartDataSet(
title = stringResource(R.string.stacked_bar_chart),
prefix = "$",
categories = listOf("Jan", "Feb", "Mar")
)
StackedBarChart(dataSet = dataSet, style = style)
}Stacked Area Chart
@Composable
private fun AddCustomStackedAreaChart() {
val colors = listOf(navyBlue, darkBlue, deepPurple)
val style = StackedAreaChartDefaults.style(
areaColors = colors,
lineColors = colors,
fillAlpha = 0.3f,
lineWidth = 3f,
bezier = false,
chartViewStyle = ChartViewDefaults.style(width = 240.dp)
)
val items = listOf(
"Cherry St." to listOf(16000.68f, 19000.34f, 24000.57f, 28000.57f),
"Strawberry Mall" to listOf(11000.68f, 15000.34f, 19000.57f, 23000f),
"Lime Av." to listOf(7000.87f, 9000.58f, 13000.81f, 15500.58f)
)
val dataSet = items.toMultiChartDataSet(
title = stringResource(R.string.stacked_area_chart),
prefix = "$",
categories = listOf("Jan", "Feb", "Mar", "Apr")
)
StackedAreaChart(dataSet = dataSet, style = style)
}Radar Chart (Custom Style)
@Composable
private fun AddCustomRadarChart() {
val categories = listOf("Speed", "Strength", "Agility", "Stamina", "Skill", "Luck")
val items = listOf(
"Falcon" to listOf(78f, 62f, 90f, 55f, 70f, 80f),
"Tiger" to listOf(65f, 88f, 60f, 82f, 55f, 68f)
)
val dataSet = items.toMultiChartDataSet(
title = stringResource(R.string.radar_chart),
categories = categories
)
val style = RadarChartDefaults.style(
lineWidth = 2.5f,
fillAlpha = 0.2f,
axisLabelVisible = true,
categoryLegendVisible = true,
categoryPinsVisible = true,
chartViewStyle = ChartViewDefaults.style(width = 240.dp)
)
RadarChart(dataSet = dataSet, style = style)
}