Horizontal stack bar chart

To add the HorizontalStackBarChart component to your app:

1
2
import { HorizontalStackBarChart } 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 horizontal stack bar chart:

1. Array of arrays

Each entry in the dataset is an array. These arrays require three items to denote the x and y coordinates and 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']
  ["April", 9, "Done"],
  ["April", 3, "To do"],
  ["April", 2, "In progress"],
  ["April", 3, "Blocked"],
  ["March", 3, "Done"],
  ["March", 4, "To do"],
  ["March", 2, "In progress"],
  ["March", 4, "Blocked"],
  ["February", 4, "Done"],
  ["February", 6, "To do"],
  ["February", 7, "In progress"],
  ["February", 3, "Blocked"],
  ["January", 6, "Done"],
  ["January", 3, "To do"],
  ["January", 2, "In progress"],
  ["January", 4, "Blocked"],
];

export const HorizontalStackBarChartWithArrayDataExample = () => {
  return <HorizontalStackBarChart
    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 three properties in the form of key-value pairs to denote the x and y coordinates and to indicate color grouping.

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

1
2
const objectData = [
  {
    xAxis: "April", // x value
    value: 9, // y value
    status: "Done", // color value
  },
  {
    xAxis: "April",
    value: 3,
    status: "To do",
  },
  {
    xAxis: "April",
    value: 2,
    status: "In progress",
  },
  {
    xAxis: "April",
    value: 3,
    status: "Blocked",
  },
  {
    xAxis: "March",
    value: 3,
    status: "Done",
  },
  {
    xAxis: "March",
    value: 4,
    status: "To do",
  },
  {
    xAxis: "March",
    value: 2,
    status: "In progress",
  },
  {
    xAxis: "March",
    value: 4,
    status: "Blocked",
  },
  {
    xAxis: "Ferbruary",
    value: 4,
    status: "Done",
  },
  {
    xAxis: "Ferbruary",
    value: 6,
    status: "To do",
  },
  {
    xAxis: "Ferbruary",
    value: 7,
    status: "In progress",
  },
  {
    xAxis: "Ferbruary",
    value: 3,
    status: "Blocked",
  },
  {
    xAxis: "January",
    value: 6,
    status: "Done",
  },
  {
    xAxis: "January",
    value: 3,
    status: "To do",
  },
  {
    xAxis: "January",
    value: 2,
    status: "In progress",
  },
  {
    xAxis: "January",
    value: 4,
    status: "Blocked",
  },
];
export const HorizontalStackBarChartWithObjectDataExample = () => {
  return <HorizontalStackBarChart
    data={objectData}
    xAccessor={"xAxis"} // key of x value in object item
    yAccessor={"value"} // key of y value in object item
    colorAccessor={"status"} // key of color value in object item
  />;
};