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.
Read more on: Bar chart.
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 | ✅ |