Bar chart

Bar charts are useful for displaying comparisons between categories of data. At Skyscanner, bar charts are commonly used for displaying fare prices within a given time period e.g. a year, month or week.

BarChart

Storybook failed to load.

Barchart with gridlines

Storybook failed to load.

bpk-component-barchart

Backpack bar chart component.

Installation

Check the main Readme for a complete installation guide.

Usage


                                                
                                                import BpkBarchart from '@skyscanner/backpack-web/bpk-component-barchart';
                                                
                                                const priceData = [
                                                  {
                                                    day: 'mon',
                                                    price: 240,
                                                  },
                                                  // ...
                                                ];
                                                
                                                export default () => (
                                                  <BpkBarchart
                                                    xAxisLabel="Weekday"
                                                    yAxisLabel="Price (£)"
                                                    xScaleDataKey="day"
                                                    yScaleDataKey="price"
                                                    initialWidth={500}
                                                    initialHeight={300}
                                                    data={priceData}
                                                  />
                                                );

Props

Check out the full list of props on Skyscanner's design system documentation website.

Props

Storybook failed to load.