Diamond Charts is a charting library for Android Jetpack Compose.
The library is available from the Maven Central repository with the current version
of
build.gradle(.kts):
dependencies {
api("com.diamondedge:charts-android:$charts_version")
}You can use a builtin composable like this:
@Preview
@Composable
private fun LineGraphMultiPreview() {
LineGraph(
RandomData(DefaultData.SIMPLE_SERIES, 2),
modifier = Modifier
.fillMaxWidth()
.height(200.dp),
margins = Margins.wideRight
)
}
More builtin samples can be found here
It is expected in most cases that you will create your own Composable that will create the chart. The following is an example of creating a line graph using a function to compute the data points.
@Composable
fun FunctionGraph(
minX: Double,
maxX: Double,
modifier: Modifier = Modifier,
margins: Margins = Margins.default,
fn: (Double) -> Double,
) {
val density = LocalDensity.current
Canvas(modifier = modifier) {
// create an instance of the Charts container
val charts = Charts(size.width, size.height, margins, Charts.LEGEND_NONE)
// add the desired charts and graphs to the container
// if multiple are added they will be drawn on top of each other
charts.add(XYGraph(createData(fn, minX, maxX)))
// make any desired changes to the vertical and horizontal axis
charts.vertAxis?.apply {
majorTickLabelPosition = TickLabelPosition.BelowTick
}
charts.horizontalAxis?.apply {
majorTickLabelPosition = TickLabelPosition.RightOfTick
}
// do the drawing of chart
// you can add custom drawing on top of the charts to provide even more customizations
drawIntoCanvas { canvas ->
charts.draw(ComposeGC(canvas, density))
}
}
}
private fun createData(fn: (Double) -> Double, minX: Double, maxX: Double): ChartData {
val data = DefaultXYData("fn")
data.dataCount = 100
val xInc = (maxX - minX) / data.dataCount
for (i in 0 until data.dataCount) {
val x = minX + (i + 1) * xInc
data.setValue(i, x, fn(x))
}
return data
}
@Preview
@Composable
private fun FunctionGraphPreview() {
FunctionGraph(
-1.5,
3.5,
modifier = Modifier
.fillMaxWidth()
.height(300.dp),
margins = Margins.wideRight
) { x ->
(x + 1) * (x - 2) * (x - 2)
}
}
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent