Bar Chart

A bar chart or bar graph plots numeric values for categorical data with rectangular bars with heights or lengths proportional to the values that they represent. Each bar represents one categorical value, and the bar length is correlated with represented data value.

Inputs

data

Type: object [] required

Data must be provided as an array of objects in JSON format. The data used along the x-axis may be either numerical or categorical, but the y-key values should be numeric.

A sample dataset could look something like this:

penguins.json

[
  {
    "species": "Adelie",
    "body_mass_g": 4675
  },
  {
    "species": "Gentoo",
    "body_mass_g": 3475
  },
  {
    "species": "Emperor",
    "body_mass_g": 4250
  },
  {
    "species": "Fairy",
    "body_mass_g": 3400
  },
  {
    "species": "Rock",
    "body_mass_g": 3700
  }
]

xKey

Type: string required

The xKey is the string as the accessor for the data series in the X-domain. This string must match the corresponding property in each data object used for plotting on the x-axis. By default, ad3lie will scale the x-axis indices accordingly depending on the type of data xKey specifies (categorical or numerical).

yKey

Type: string required

The yKey is the string as the accessor for the data series in the Y-domain. This string must match the corresponding property in each data object used for plotting on the y-axis. The yKey should represent data of type number.

xAxisLabel

Type: string

An optional label for the x-axis. Defaults to an empty string "".

yAxisLabel

Type: string

An optional label for the y-axis. Defaults to an empty string "".

height

Type: number required

Chart height in pixels, used within the bounding box of the Chart wrapper component. If a value < 100 is provided, this value will default back to 500.

width

Type: number required

Chart width in pixels, used within the bounding box of the Chart wrapper component. If a value < 100 is provided, this value will default back to 500.

Under the Hood

✅

Under the hood, the Chart component acts as a container wrapper (containing every chart SVG element: data elements, axes, labels, etc.), which are bounded by the chart dimensions (containing data elements, e.g., Bars). To accomodate all webpage sizes, we start with the available amount of space for each chart and specify some space for the margins:

export const combineChartDimensions = (dimensions) => {
  let parsedDimensions = {
    marginTop: 40,
    marginRight: 30,
    marginBottom: 40,
    marginLeft: 75,
    ...dimensions
  };
  ...

which gives room for the chart axes and labels. The input dimensions are computed with default margins to determine the new bounds dimensions:

...
  return {
    ...parsedDimensions,
    boundedHeight: Math.max(
      parsedDimensions.height -
        parsedDimensions.marginTop -
        parsedDimensions.marginBottom,
      0
    ),
    boundedWidth: Math.max(
      parsedDimensions.width -
        parsedDimensions.marginLeft -
        parsedDimensions.marginRight,
      0
    )
  };
};

Knowing the difference between bounds and wrapper and helps distiguish between the space required for plotting our data vs. additional chart elements.

Children

The BarChart contains the following children components:

Chart
Axis
Rectangle

Component Structure and Use

The finished MyBarChart is structured like so:

import { data } from 'MyBarChartData.js'
import { BarChart } from 'ad3lie'
const MyBarChart = ({ data /* see data from your Javascript data file */ }) => (
  <BarChart
    data={data}
    xKey="species"
    yKey="body_mass_g"
    xAxisLabel="X-axis: Species"
    yAxisLabel="Y-axis: Body Mass"
    height={500}
    width={500}
  />
)

Simply import your custom MyBarChart along with MyBarChartData.js for easy use. Or, pull BarChart and provide the required props yourself.

Props Summary

Property	Type	Required?
data	object []	✅
xKey	string	✅
yKey	string	✅
xAxisLabel	string	❌
yAxisLabel	string	❌
height	number	✅
width	number	✅