DOCSEARCHbyAlgolia
Submit Docs

Vico Chart Library

repository·master·Indexed 25 days ago

https://github.com/patrykandpatrick/vico

A powerful and extensible chart library built for Compose Multiplatform. Vico enables developers to create rich data visualizations, including Cartesian and Pie charts, across multiple platforms. It features support for candlestick charts via CandlestickCartesianLayer, customizable axes, and advanced data management using CartesianChartModelProducer. Additionally, it provides specialized integration for Jetpack Glance widgets through CartesianChartImage and PieChartImage, and maintains a views module for legacy view-based Android projects.

Tokens
10.1K
Snippets
24
Records
71
Agent score
84%

What's inside Vico

  6. Provide a custom VicoTheme

    master

    Use ProvideVicoTheme to supply a custom VicoTheme instance to your chart components. This allows you to override default chart colors globally for a specific part of your UI tree. Functions like rememberColumnCartesianLayer and rememberLineCartesianLayer will automatically use the colors provided by this theme if no other arguments are passed.

    ProvideVicoTheme(remember(/* ... */) { VicoTheme(/* ... */) }) { /* ... */ }

  7. Format axis labels using categories

    master

    To display category names (e.g., "A", "B", "C") instead of numerical indices on an axis, use the ExtraStore to pass a list of labels into the chart model. The x value in the formatter acts as the index for this list.

    1. Define an ExtraStore.Key for your list of labels.
    2. In a cartesianChartModelProducer.runTransaction, add your data series and store the label list in extras.
    3. Implement a CartesianValueFormatter that retrieves the label from the extraStore using the x value as an index.
    val labelListKey = ExtraStore.Key<List<String>>()

// 1. Provide data and labels in the transaction
cartesianChartModelProducer.runTransaction {
    columnModel { series(data.values) }
    extras { it[labelListKey] = data.keys.toList() }
}

// 2. Use the formatter to map index to label
val formatter = CartesianValueFormatter { context, x, _ ->
    context.model.extraStore[labelListKey][x.toInt()]
}

  9. Use CartesianMarker to highlight chart points

    master

    Use CartesianMarker instances to highlight specific points on a chart. There are two ways to implement them:

    1. Standard markers: These appear temporarily based on user interaction (e.g., tap or hover). Add them using the marker parameter in rememberCartesianChart.
    2. Persistent markers: These are shown permanently at specific x-values. Add them using the persistentMarkers parameter in rememberCartesianChart.

    You can use the provided DefaultCartesianMarker or implement the CartesianMarker interface yourself.

  10. Format axis labels using dates

    master

    To display dates on an axis where dates are spaced proportionally, map the dates to their epoch day values (as Float) for the chart data, and store the original mapping in the ExtraStore.

    1. Create an ExtraStore.Key for a map of Float (epoch day) to LocalDate.
    2. Convert your dates to epoch days to create the chart series.
    3. Store the Map<Float, LocalDate> in the chart's extras.
    4. In the CartesianValueFormatter, look up the LocalDate using the x value and format it using a DateTimeFormatter.
    val xToDateMapKey = ExtraStore.Key<Map<Float, LocalDate>>()
val xToDates = data.keys.associateBy { it.toEpochDay().toFloat() }

// 1. Provide data and date mapping in the transaction
cartesianChartModelProducer.runTransaction {
    lineModel { series(xToDates.keys, data.values) }
    extras { it[xToDateMapKey] = xToDates }
}

// 2. Use the formatter to map epoch day to formatted date string
val dateTimeFormatter = DateTimeFormatter.ofPattern("d MMM")
val formatter = CartesianValueFormatter { context, x, _ ->
    (context.model.extraStore[xToDateMapKey][x] ?: LocalDate.ofEpochDay(x.toLong()))
        .format(dateTimeFormatter)
}

  12. Use common Vico styling components

    master

    Customize the visual appearance of charts using these common components:

    • Component: Base building block for chart elements.
    • Fill: Defines how areas within a chart are filled.
    • Shape: Defines the geometry of chart elements.
    • Legend: Displays labels for chart data series.
    • VicoTheme: Provides a centralized way to manage colors, typography, and other theme-related properties.