Bar chart

To add the BarChart component to your app:

1
2
import { BarChart } from '@forge/react';

Props

Data

Data can be one of two formats, an array of arrays or an array of objects. Both examples below will produce the same bar chart:

1. Array of arrays

Each entry in the dataset is an array. These arrays require a minimum of two items to denote the x and y coordinates. Optionally, an extra item may be included to indicate color grouping.

For this data format, the xAccessor, yAccessor and colorAccessor are number indices, identified by the position within each array.

1
2
const arrayData = [
  // in this example ['x value', 'y value', 'color value']
  ['Jan', 5, 'Sophie'],
  ['Jan', 10, 'Taylor'],
  ['Jan', 25, 'Lee'],
  ['Jan', 15, 'Charli'],
  ['Feb', 13, 'Sophie'],
  ['Feb', 5, 'Taylor'],
  ['Feb', 15, 'Lee'],
  ['Feb', 22, 'Charli'],
  ['Mar', 2, 'Sophie'],
  ['Mar', 15, 'Taylor'],
  ['Mar', 4, 'Lee'],
  ['Mar', 18, 'Charli'],
  ['Apr', 10, 'Sophie'],
  ['Apr', 30, 'Taylor'],
  ['Apr', 5, 'Lee'],
  ['Apr', 8, 'Charli'],
];

export const BarChartWithArrayDataExample = () => {
  return <BarChart 
    data={arrayData} 
    xAccessor={0} // position 0 in item array
    yAccessor={1} // position 1 in item array
    colorAccessor={2} // position 2 in item array
  />;
};

2. Array of objects

Each entry in the dataset is an object. These objects require a minimum of two properties in the form of key-value pairs to denote the x and y coordinates. Optionally, an extra property may be included to indicate color grouping.

For this data format, the xAccessor and yAccessor are string indices, identified by the key of the key-value pairs.

1
2
const objectData = [
  {
    xAxis: 'Jan', // x value
    value: 5, // y value
    teamMember: 'Sophie', // color value
  },
  {
    xAxis: 'Jan',
    value: 1,
    teamMember: 'Taylor',
  },
  {
    xAxis: 'Jan',
    value: 22,
    teamMember: 'Lee',
  },
  {
    xAxis: 'Jan',
    value: 6,
    teamMember: 'Charli',
  },
  {
    xAxis: 'Feb',
    value: 13,
    teamMember: 'Sophie',
  },
  {
    xAxis: 'Feb',
    value: 3,
    teamMember: 'Taylor',
  },
  {
    xAxis: 'Feb',
    value: 10,
    teamMember: 'Lee',
  },
  {
    xAxis: 'Feb',
    value: 3,
    teamMember: 'Charli',
  },
  {
    xAxis: 'Mar',
    value: 1,
    teamMember: 'Sophie',
  },
  {
    xAxis: 'Mar',
    value: 5,
    teamMember: 'Taylor',
  },
  {
    xAxis: 'Mar',
    value: 4,
    teamMember: 'Lee',
  },
  {
    xAxis: 'Mar',
    value: 12,
    teamMember: 'Charli',
  },
  {
    xAxis: 'Apr',
    value: 6,
    teamMember: 'Sophie',
  },
  {
    xAxis: 'Apr',
    value: 13,
    teamMember: 'Taylor',
  },
  {
    xAxis: 'Apr',
    value: 33,
    teamMember: 'Horse',
  },
  {
    xAxis: 'Apr',
    value: 1,
    teamMember: 'Charli',
  },
];
export const BarChartWithObjectDataExample = () => {
  return <BarChart 
    data={objectData} 
    xAccessor={"xAxis"} // key of x value in object item
    yAccessor={"value"} // key of y value in object item
    colorAccessor={"teamMember"} // key of color value in object item
  />;
};