Updated with ❤️ by Dmitry
Brought with ❤️ by
| Platform | Supported |
|---|---|
| Android | ✅ |
| IOS | ✅ |
| Desktop | ✅ |
In Android or Kotlin Multiplatform project:
dependencies {
implementation("com.netguru.multiplatform:charts:0.0.1")
}Add maven repository:
Instead of {username}, insert your github login, and instead of {token}, insert a token (screenshot with example below)
repositories {
// other
maven("https://{username}:{token}@maven.pkg.github.com/kalist28/compose-multiplatform-charts")
}Create token with read packages permission
The library provides following components:
Most of the components have arguments like:
- data - depends on chart type it's complex dataset or few primitives arguments
- colors - gives the possibility to change colors of the chart. In some cases the colors are stored in datasets (like in BarChart or LineChart). See theming section to set same appearance to all charts.
- config - allows to personalize charts. Depends on chart type it can modify different parts of component. See documentation of specific chart
- animation - the way how chart should appear at the first time
Before using component the BarChartData has to be prepared:
val barChartData = BarChartData(
categories = listOf(
BarChartCategory(
name = "Bar Chart 1",
entries = listOf(
BarChartEntry(
x = "primary",
y = 17f,
color = Color.Yellow,
),
BarChartEntry(
x = "secondary",
y = 30f,
color = Color.Red,
),
)
),
BarChartCategory(
name = "Bar Chart 2",
entries = listOf(
BarChartEntry(
x = "primary",
y = -5f,
color = Color.Yellow,
),
BarChartEntry(
x = "secondary",
y = -24f,
color = Color.Red,
),
)
),
)
)BarChart(
data = barChartData,
config = BarChartConfig(
thickness = 14.dp,
cornerRadius = 7.dp,
),
modifier = Modifier.height(500.dp),
animation = ChartAnimation.Sequenced(),
)There is another component called BarChartWithLegend. It renders bar chart with legend.
Before using component the list of Bubble has to be prepared:
val bubbles = listOf(
Bubble(
name = "first",
value = 1.2f,
icon = Icons.Default.Album,
color = Color.Yellow
),
Bubble(
name = "second",
value = 4.6f,
icon = Icons.Default.House,
color = Color.Green
),
Bubble(
name = "third",
value = 6.9f,
icon = Icons.Default.Bed,
color = Color.Blue
),
)BubbleChart(
bubbles = bubbles,
modifier = Modifier.size(300.dp),
animation = ChartAnimation.Sequenced(),
)
Dial(
value = 22,
minValue = -20,
maxValue = 50,
modifier = Modifier.fillMaxWidth(),
animation = ChartAnimation.Simple {
spring(
dampingRatio = Spring.DampingRatioMediumBouncy,
stiffness = Spring.StiffnessLow
)
},
config = DialConfig(
thickness = 20.dp,
roundCorners = true,
),
mainLabel = {
Column(
horizontalAlignment = Alignment.CenterHorizontally
) {
Text(
text = "$it°C",
style = MaterialTheme.typography.h4,
color = Color.Yellow
)
Text(
text = "outside temperature",
style = MaterialTheme.typography.body2,
modifier = Modifier.padding(top = 12.dp)
)
}
}
)There is another component ProcentageDial. It accepts only one data argument percentage in [0-100] range.
GasBottle(
percentage = 75f,
modifier = Modifier.size(width = 200.dp, height = 300.dp),
animation = ChartAnimation.Simple {
spring(
dampingRatio = Spring.DampingRatioMediumBouncy,
stiffness = Spring.StiffnessVeryLow
)
}
)
Before using component the LineChartData has to be prepared:
val lineData = remember {
LineChartData(
series = (1..3).map {
LineChartSeries(
dataName = "data $it",
lineColor = listOf(
Color.Yellow,
Color.Red,
Color.Blue,
)[it - 1],
listOfPoints = (1..10).map { point ->
LineChartPoint(
x = DateTime.now().minus(TimeSpan(point * 24 * 60 * 60 * 1000.0)).unixMillisLong,
y = (1..15).random().toFloat(),
)
}
)
},
)
}LineChart(
lineChartData = lineData,
modifier = Modifier.height(300.dp),
xAxisLabel = {
Text(
fontSize = 12.sp,
text = DateTime.fromUnix(it as Long).format("yyyy-MM-dd"),
textAlign = TextAlign.Center
)
},
overlayHeaderLabel = {
Text(
text = DateTime.fromUnix(it as Long).format("yyyy-MM-dd"),
style = MaterialTheme.typography.overline
)
},
animation = ChartAnimation.Sequenced()
)
Before using component the list of PieChartData has to be prepared:
val data = listOf(
PieChartData(
name = "Data 1",
value = 10.0,
color = Color.Yellow,
),
PieChartData(
name = "Data 2",
value = 20.0,
color = Color.Green,
),
PieChartData(
name = "Data 3",
value = 30.0,
color = Color.Blue,
),
PieChartData(
name = "Data 4",
value = 40.0,
color = Color.Red,
)
)PieChart(
data = data,
modifier = Modifier.size(300.dp),
config = PieChartConfig(
thickness = 40.dp
),
)By default the thickness is Dp.Infinity, it means the chart will be fully filled.
The easiest way to set the same colors for all charts is to provide ChartColors in the app theme.
private val chartColors = ChartColors(
primary = Color.Green,
grid = Color.LightGray,
surface = Color.White,
fullGasBottle = Color.Green,
emptyGasBottle = Color.Red,
overlayLine = Color.Magenta
)
@Composable
fun AppTheme(
darkTheme: Boolean = isSystemInDarkTheme(),
content: @Composable () -> Unit,
) {
CompositionLocalProvider(
// ...
LocalChartColors provides chartColors,
) {
MaterialTheme(
// ...
content = content,
)
}
}
There is also default ChartColors provided by the library. It uses the default color set from MaterialTheme.
LocalChartColors provides ChartDefaults.chartColors()Each chart has its own color set which can be used like:
BarChart(
data = barChartData,
colors = BarChartColors(grid = Color.LightGray)
)Also there is possibility to use ChartColors inside the specific chart:
BarChart(
data = barChartData,
colors = ChartColors(...).barChartColors,
)Reporting Security Vulnerabilities
This library is available as open source under the terms of the MIT License.