Line Chart

The following file represents the data structure that the simulation must output for the graph to be plotted as a line graph. The props for the LineChart component are also shown below is described in the Configuration section.

type LineChartData = {
  title: string;
  xlabel: string;
  ylabel: string;
  data: {
    x: number[] | number[][]; // either one array of x values (global), or an array of arrays of x values for each line
    y: number[][]; // each array is a line [[...], [...], [...]]  or single line [...]
    labels: string[]; // each label is a line ["label1", "label2", "label3"]
    ymin?: number[][]; // same dim as y
    ymax?: number[][]; // same dim as y
  };
};

Basic Examples

Note in these examples we omit the title, xlabel, and ylabel for brevity.

One Line

1 Line

<LineChart
  data={{
    x: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10],
    y: [[1, 2, 3, 4, 5, 6, 7, 8, 9, 10]],
    labels: ["label1"],
  }}
  title="1 Line"
  xlabel="x"
  ylabel="y"
/>

Three Lines

3 Lines, Same X values

<LineChart
  data={{
    x: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10],
    y: [
      [1, 2, 3, 4, 5, 6, 7, 8, 9, 10],
      [2, 4, 6, 8, 10, 12, 14, 16, 18, 20],
      [3, 6, 9, 12, 15, 18, 21, 24, 27, 30],
    ],
    labels: ["label1", "label2", "label3"],
  }}
  title="3 Lines, Same X values"
  xlabel="x"
  ylabel="y"
/>

Contionous Error Bar

Error

<LineChart
  data={{
    x: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10],
    y: [[1, 2, 3, 4, 5, 6, 7, 8, 9, 10]],
    labels: ["label1"],
    ymin: [[0, 1, 2, 3, 4, 5, 6, 7, 8, 9]],
    ymax: [[2, 3, 4, 5, 6, 7, 8, 9, 10, 11]],
  }}
  title="1 Line"
  xlabel="x"
  ylabel="y"
/>

Configuration

The props for the LineChart extend the LineChartData type, and are as follows:

export interface LineProps extends LineChartData {
  cardProps?: CardProps;
  divId?: string;
  height?: number;
  dateTime?: boolean;
  fill?: boolean;
  chartType?: "webgl" | "svg";
  defaultCurveStyle?: "linear" | "step" | "natural";
  allowSelectCurveStyle?: boolean;
  marker?: "line" | "scatter";
}

cardProps - props for the Card component that wraps the LineChart component
divId - the id of the div that wraps the LineChart component (you don't really need to worry about this)
height - the height of the LineChart component, in pixels, use this to make the chart bigger or smaller from the default size
fill shades the area under the line (default is false)
chartType - the type of chart to use, either webgl or svg (default is webgl). Use webgl for large datasets, and svg when you have more than 8 charts on the page. webgl is more performant.

`dateTime`

The dateTime prop allows for conversion of unix timestamp (in ms) x values into human readable date strings. eg.

dateTime

<LineChart
  data={{
    x: [
      1614556800000, 1614643200000, 1614729600000, 1614816000000, 1614902400000,
    ],
    y: [[1, 2, 3, 4, 5, 6, 7, 8, 9, 10]],
    labels: ["label1"],
  }}
  title="1 Line"
  xlabel="x"
  ylabel="y"
  dateTime // could also be dateTime={true}
/>

`defaultCurveStyle`

The default curve style prop allows for the default curve style to be set. The default is linear, but can be set to step or natural. eg.

defaultCurveStyle

<LineChart
  data={{
    x: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10],
    y: [[1, 2, 3, 4, 5, 6, 7, 8, 9, 10]],
    labels: ["label1"],
  }}
  title="1 Line"
  xlabel="x"
  ylabel="y"
  defaultCurveStyle="step"
/>

`allowSelectCurveStyle`

The allow select curve style prop allows for the curve style to be selected by the user via a dropdown in the top right. The default is false, but can be set to true. eg.

allowSelectCurveStyle

<LineChart
  data={{
    x: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10],
    y: [[1, 2, 3, 4, 5, 6, 7, 8, 9, 10]],
    labels: ["label1"],
  }}
  title="1 Line"
  xlabel="x"
  ylabel="y"
  allowSelectCurveStyle
/>

`marker`

The marker prop allows for the marker to be set. The default is line, but can be set to scatter. eg.

marker

<LineChart
  data={{
    x: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10],
    y: [[1, 2, 3, 4, 5, 6, 7, 8, 9, 10]],
    labels: ["label1"],
  }}
  title="1 Line"
  xlabel="x"
  ylabel="y"
  marker="scatter"
/>

Introduction Bar