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 () => (
  
);

Props

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.

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: , // The `data` array object from the bar clicked
}) => {
  ...
}

onBarHover

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

onBarFocus

const onBarFocus = (event, {
  point: , // 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';
}