bpk-component-barchart

bpk-component-barchart

Backpack bar chart component.

Installation

npm install bpk-component-barchart --save-dev

Usage

import React from 'react';
import BpkBarchart from '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

Property	PropType	Required	Default Value
data	custom(validates usage of scale keys)	true	-
xScaleDataKey	string	true	-
yScaleDataKey	string	true	-
xAxisLabel	string	true	-
yAxisLabel	string	true	-
initialWidth	number	true	-
initialHeight	number	true	-
className	string	false	null
leadingScrollIndicatorClassName	string	false	null
trailingScrollIndicatorClassName	string	false	null
outlierPercentage	number	false	null
showGridlines	bool	false	false
xAxisMargin	number	false	3
xAxisTickValue	func	false	identity
xAxisTickOffset	number	false	0
xAxisTickEvery	number	false	1
yAxisMargin	number	false	2.625
yAxisTickValue	func	false	identity
yAxisNumTicks	number	false	null
yAxisDomain	array	false	Calculated by component
onBarClick	func	false	null
onBarHover	func	false	null
onBarFocus	func	false	null
getBarLabel	func	false	See prop details
getBarSelection	func	false	See prop details
BarComponent	elementType	false	BpkBarchartBar
disableDataTable	bool	false	false

Theme Props

• barchartBarBackgroundColor
• barchartBarHoverBackgroundColor
• barchartBarActiveBackgroundColor
• barchartBarSelectedBackgroundColor

Prop Details

data

An array of data points with a value for the x axis and y axis respectively. The keys for the x axis and y axis can be anything you choose. Specify the keys with the props xScaleDataKey and yScaleDataKey. For this data the xScaleDataKey would be day and the yScaleDataKey price.

[
  {
    "day": "mon",
    "price": 240
  },
  {
    "day": "tus",
    "price": 340
  },
  {
    "day": "wen",
    "price": 300
  },
  {
    "day": "thu",
    "price": 340
  },
  {
    "day": "fri",
    "price": 353
  },
  {
    "day": "sat",
    "price": 290
  },
  {
    "day": "sun",
    "price": 380
  }
]

xScaleDataKey

The key in each data point that holds the value for the x axis of that data point.

yScaleDataKey

The key in each data point that holds the value for the y axis of that data point.

yAxisDomain

Override the default y axis domain. This is an array with two elements, the lower then upper domain. If either value is set to null the default value is used instead.

<BpkBarchart
  ...
  yAxisDomain={[null, 100]} // The y axis will go from 0 (the default) to 100.
/>

outlierPercentage

Values that are outlierPercentage percent above the mean of the whole dataset are considered outliers and rendered cut off instead of at their full height.

onBarClick

const onBarClick = (event, {
  point: <Object>, // The `data` array object from the bar clicked
}) => {
  ...
}

onBarHover

const onBarHover = (event, {
  point: <Object>, // The `data` array object from the bar hovered
}) => {
  ...
}

onBarFocus

const onBarFocus = (event, {
  point: <Object>, // The `data` array object from the bar focused
}) => {
  ...
}

getBarLabel

By default the following function is used:

(point, xScaleDataKey, yScaleDataKey) => {
  return `${point[xScaleDataKey]} - ${point[yScaleDataKey]}`;
}

getBarSelection

Must be a function which returns true based on the point argument:

const getBarSelection = (point) => {
  return point.myKnownProperty === 'foo';
}