Line (EAP)

To add the LineChart component to your app:

1
2
import { LineChart } 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 line 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']
  ['Apple', 10, 'Dog'],
  ['Apple', 1, 'Cat'],
  ['Apple', 25, 'Horse'],
  ['Apple', 5, 'Elephant'],
  ['Banana', 5, 'Dog'],
  ['Banana', 5, 'Cat'],
  ['Banana', 15, 'Horse'],
  ['Banana', 20, 'Elephant'],
  ['Kumquat', 15, 'Dog'],
  ['Kumquat', 10, 'Cat'],
  ['Kumquat', 25, 'Horse'],
  ['Kumquat', 20, 'Elephant'],
  ['Dragonfruit', 30, 'Dog'],
  ['Dragonfruit', 20, 'Cat'],
  ['Dragonfruit', 5, 'Horse'],
  ['Dragonfruit', 10, 'Elephant'],
];

export const LineChartWithArrayDataExample = () => {
  return <LineChart 
    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, yAccessor and colorAccessor are string indices, identified by the key of the key-value pairs.

1
2
const objectData = [
  {
    xAxis: 'Apple', // x value
    value: 10, // y value
    animal: 'Dog', // color value
  },
  {
    xAxis: 'Apple',
    value: 1,
    animal: 'Cat',
  },
  {
    xAxis: 'Apple',
    value: 25,
    animal: 'Horse',
  },
  {
    xAxis: 'Apple',
    value: 5,
    animal: 'Elephant',
  },
  {
    xAxis: 'Banana',
    value: 5,
    animal: 'Dog',
  },
  {
    xAxis: 'Banana',
    value: 5,
    animal: 'Cat',
  },
  {
    xAxis: 'Banana',
    value: 15,
    animal: 'Horse',
  },
  {
    xAxis: 'Banana',
    value: 20,
    animal: 'Elephant',
  },
  {
    xAxis: 'Kumquat',
    value: 15,
    animal: 'Dog',
  },
  {
    xAxis: 'Kumquat',
    value: 10,
    animal: 'Cat',
  },
  {
    xAxis: 'Kumquat',
    value: 25,
    animal: 'Horse',
  },
  {
    xAxis: 'Kumquat',
    value: 20,
    animal: 'Elephant',
  },
  {
    xAxis: 'Dragonfruit',
    value: 30,
    animal: 'Dog',
  },
  {
    xAxis: 'Dragonfruit',
    value: 20,
    animal: 'Cat',
  },
  {
    xAxis: 'Dragonfruit',
    value: 5,
    animal: 'Horse',
  },
  {
    xAxis: 'Dragonfruit',
    value: 10,
    animal: 'Elephant',
  },
];

export const LineChartWithObjectDataExample = () => {
  return <LineChart 
    data={objectData} 
    xAccessor={'xAxis'} 
    yAccessor={'value'} 
    colorAccessor={'animal'}
  />;
}