How to use bpk-component-barchart - 2 common examples
To help you get started, we’ve selected a few bpk-component-barchart examples, based on popular ways it is used in public projects.
Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.
Skyscanner / backpack / packages / bpk-docs / src / pages / BarchartsPage / BarchartsPage.js View on Github 
const EnhancedBarchart = updateOnDirectionChange(BpkBarchart);
const InteractiveBarchart = withSelectedState(EnhancedBarchart);
const components = [
{
id: 'default',
title: 'Default',
blurb: [
By default, bar charts come with axis labels.,
],
examples: [
,
],
},
{
id: 'gridlines',
title: 'With gridlines',
blurb: [
It is possible to show gridlines for each tick on the Y axis.
,import BpkLink from 'bpk-component-link';
import BpkBarchart from 'bpk-component-barchart';
import { onePixelRem } from 'bpk-tokens/tokens/base.es6';
import { withSelectedState } from 'bpk-component-barchart/hocs';
import barchartReadme from 'bpk-component-barchart/README.md';
import { updateOnDirectionChange } from 'bpk-component-rtl-toggle';
import data from 'bpk-component-barchart/data.json';
import DocsPageBuilder from '../../components/DocsPageBuilder';
import DocsPageWrapper from '../../components/DocsPageWrapper';
import Paragraph from '../../components/Paragraph';
import IntroBlurb from '../../components/IntroBlurb';
import Code from '../../components/Code';
const EnhancedBarchart = updateOnDirectionChange(BpkBarchart);
const InteractiveBarchart = withSelectedState(EnhancedBarchart);
const components = [
{
id: 'default',
title: 'Default',
blurb: [
By default, bar charts come with axis labels.,
],
examples: [bpk-component-barchart
Backpack bar chart component.
