BarChart

Default

Day	Night

Installation

Backpack Compose is available through Maven Central. Check the main Readme for a complete installation guide.

Usage

Example of a BarChart:

                                                
                                                import net.skyscanner.backpack.compose.barchart.BpkBarChart
                                                import net.skyscanner.backpack.compose.barchart.BpkBarChartModel
                                                
                                                val model = createBarChartModel() // see docs below
                                                
                                                var selectedItem by remember { mutableStateOf<BpkBarChartModel.Item?>(null) }
                                                
                                                BpkBarChart(
                                                  model = model,
                                                  selected = selectedItem,
                                                  onSelectionChange = { selectedItem = it },
                                                )

To render data you need to create a model for BarChart in code. Detailed documentation on each property of the model is available here.

Here's an example which generates a model for one single month in Kotlin:

                                                
                                                import net.skyscanner.backpack.compose.barchart.BpkBarChartModel
                                                import org.threeten.bp.LocalDate
                                                import org.threeten.bp.YearMonth
                                                import org.threeten.bp.format.TextStyle
                                                import java.util.Locale
                                                
                                                fun createBarChartModel(locale: Locale, yearMonth: YearMonth) =
                                                  BpkBarChartModel(
                                                    caption = "Bar chart caption",
                                                    legend = BpkBarChartModel.Legend(
                                                      selectedTitle = "Selected",
                                                      inactiveTitle = "No price",
                                                      activeTitle = "Price",
                                                    ),
                                                    items = List(yearMonth.lengthOfMonth()) { day ->
                                                      val date = LocalDate.of(yearMonth.year, yearMonth.month, day + 1)
                                                      BpkBarChartModel.Item(
                                                        key = date, // unique id of a specific bar – date in this case
                                                        title = date.dayOfWeek.getDisplayName(TextStyle.SHORT, locale),
                                                        subtitle = date.dayOfMonth.toString(),
                                                        group = date.month.getDisplayName(TextStyle.FULL, locale), // title of the current list section
                                                        values = BpkBarChartModel.Values(
                                                          // null if not selectable
                                                          text = "£42", // text to be displayed when selected,
                                                          percent = 0.5f, // fill bar by 50%
                                                        ),
                                                        // provides accessibility information here to be used with screen readers
                                                        // make sure it's formatted properly and includes all the relevant information needed (title, subtitle, text value, group)
                                                        // the example below is just for general purposes
                                                        contentDescription = "Monday the 7th of January, price is £142",
                                                      )
                                                    }
                                                  )