Line Plot

Use the Line Plot component to display real-time or historical data.

Real-Time Plot

To display live data from a channel or set of channels, use the Channel.LinePlot component and provide it with a line whose variant is set to "dynamic". This will continuously update the plot with new data as it arrives.

Example

Here’s a simple example that pulls the most recent 30 seconds of data from a channel and displays it in a line plot.

Code

Here’s the code for that example.

import { Channel, TimeSpan } from "@synnaxlabs/pluto";

const MyDynamicLinePLot = () => (
  <Channel.LinePlot
    style={{ width: 800, height: 500 }}
    lines={[
      {
        key: "line1",
        axes: { x: "x1", y: "y1" },
        channels: {
          x: "stream_write_example_time",
          y: "stream_write_example_data_1",
        },
        color: "#3774d0",
        label: "Line 1",
        variant: "dynamic",
        strokeWidth: 2,
        timeSpan: TimeSpan.seconds(30),
      },
    ]}
    axes={[
      {
        key: "x1",
        label: "Time",
        location: "bottom",
        type: "time",
      },
      {
        key: "y1",
        label: "Values",
        location: "left",
      },
    ]}
  />
);

Historical Plot

You can also using the Channel.LinePlot component to display historical data. To do this, set the variant prop of the line to "static", and provide a timeRange prop that specifies the time range of the data to display. Here’s updated code for the previous example that displays data from a specific time range.

const MyHistoricalLinePlot = () => (
  <Channel.LinePlot
    style={{ width: 800, height: 500 }}
    lines={[
      {
        key: "line1",
        axes: { x: "x1", y: "y1" },
        channels: {
          x: "stream_write_example_time",
          y: "stream_write_example_data_1",
        },
        color: "#3774d0",
        label: "Line 1",
        variant: "static",
        strokeWidth: 2,
        timeRange: {
          start: new Date("2022-01-01T00:00:00Z"),
          end: new Date("2022-01-02T00:00:00Z"),
        },
      },
    ]}
    axes={[
      {
        key: "x1",
        label: "Time",
        location: "bottom",
        type: "time",
      },
      {
        key: "y1",
        label: "Values",
        location: "left",
      },
    ]}
  />
);

Props

Here’s a summary of the props available for the Channel.LinePlot component.

Prop	Type	Status
`lines`	`Array<Channel.StaticLineProps \| Channel.DynamicLineProps>`	Required
`axes`	`Array<Channel.AxisProps>`	Required
`title`	`string`	Optional
`showLegend`	`boolean`	Optional
`enableTooltip`	`boolean`	Optional
`style`	`React.CSSProperties`	Required

`lines`

The lines prop is an array of objects that defines the lines that will be displayed on the plot. There are two types of lines, those with variant="static" and those with variant="dynamic". A static line is used to display historical data, and requires a timeRange prop, while a dynamic plots rolling real-time data and requires a timeSpan prop. Here is a summary of the props available for each type of line.

Prop	Type	Required/Default	Description
`key`	`string`	Required	A unique key to identify the line.
`channels`	`{ x: string \| number, y: string \| number }`	Required	The keys or the names of the channels to plot on the x and y axes.
`axes`	`{ x: string, y: string }`	Required	The keys of the axes to plot the lines on. For best results, the x-axis should be horizontal and the y-axis should be vertical.
`variant`	`"static" \| "dynamic"`	Required	The type of line to display. See above for more information.
`timeRange`	`CrudeTimeRange`	Required for `static` lines.	The time range to display for the line. Data for all channels will be fetched for this time range.
`timeSpan`	`CrudeTimeSpan`	Required for `dynamic` lines.	The rolling interval to display for the line. Data for all channels will be continuously updated for this time span.
`color`	`string`	Required	The color of the line.
`label`	`string`	`""`	The label to display in the legend.
`strokeWidth`	`number`	`2`	The width of the line.

`axes`

The axes prop is an array of objects that define the axes to display on the plot.

Prop	Type	Required/Default	Description
`key`	`string`	Required	A unique key to identify the axis.
`label`	`string`	Required	The label to display on the axis.
`location`	`"top" \| "bottom" \| "left" \| "right"`	Required	The location of the axis. Multiple axes can in the same location. The first axes will be the outermost axis, and the last axes will be the innermost.
`type`	`"time" \| "linear"`	`"linear"`	The scale type to use. A `time` axis will display timestamps, while a `linear` axis will display numerical data.
`color`	`string`	`"pluto-gray-l3"`	The color of the axis.
`gridColor`	`string`	`"pluto-gray-l1"`	The color of the grid lines.
`label`	`string`	`""`	The label to display on the axis.
`labelLevel`	`"h1" \| "h2" \| "h3" \| "h4" \| "h5" \| "p" \| "small"`	`"p"`	The size of the label to display, organized by heading level.
`labelDirection`	`"x" \| "y"`	`"x"` if horizontal, `"y"` if vertical.	The orientation of the label.
`bounds`	`{ lower: number, upper: number }`	Automatic	The bounds of the axis. If not provided, the bounds will be calculated and continuously updated based on the data.
`showGrid`	`boolean`	`true`	Whether to display grid lines on the plot for the axis.

Theming

Example App