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';
}