compose-graphs
Zoomable and Draggable Graphs based-on Jetpack Compose. Supports Android & iOS, Web and Desktop.
Features
- Full customization of the various parts of the graph (like the point, line between the points, highlight when selected, the values in x-axis and y-axis, etc...)
- Supports scrolling, zooming and touch drag selection
How to use
Just add the LineGraph
composable and pass it a Plot
with all your configuration and customisation. Please take a look at the app app to see the various customisations available. Almost every aspect of the graph is customisable. You can even override the default draw implementations and can draw a Rectangle
instead of a Circle
, etc. The below code renders the Orange graph that you see in the above screenshots.
@Composable
fun LineGraph1(lines: List<List<PointF>>) {
LineGraph(
plot = Plot(
lines = listOf(
Plot.Line(
points = lines[0],
connection = Plot.Connection(LightGreen600, 2.dp),
intersection = Plot.Intersection(LightGreen600, 5.dp),
highlight = Plot.Highlight(Green900, 5.dp),
underline = Plot.Underline(LightGreen600, 0.3F)
),
Plot.Line(
points = lines[1], connection = Plot.Connection(Color.LightGray, 2.dp),
intersection = Plot.Intersection { center, point ->
val px = 2.dp.toPx()
val topStart = Offset(center.x - px, center.y - px)
drawRect(Color.LightGray, topLeft = topStart, Size(px * 2, px * 2))
},
),
),
selection = Plot.Selection(
highlight = Plot.Connection(
Green900, strokeWidth = 2.dp, pathEffect = PathEffect.dashPathEffect(
floatArrayOf(40F, 20F)
)
)
),
),
modifier = Modifier
.fillMaxWidth()
.height(180.dp)
)
}