ChartContainer - Electric UI

ChartContainer is the foundational component responsible for rendering charts.

Usage

Charts use a composability model where a ChartContainer accepts child components responsible for specific sections of the chart's functionality.

The children of a ChartContainer cannot nest inside other components, or be moved into other components. They must be the flat children of the ChartContainer component.

import { 
  ChartContainer, 
  LineChart, 
  RealTimeDomain, 
  TimeAxis,  
  VerticalAxis 
} from '@electricui/components-desktop-charts'
import { useMessageDataSource } from '@electricui/core-timeseries'
 
const OverviewPage = () => {
  const sensorDS = useMessageDataSource('speed')
 
  return (
    <React.Fragment>
      <ChartContainer>
        <LineChart dataSource={sensorDS}/>
        <RealTimeDomain window={10000} />
        <VerticalAxis />
        <TimeAxis />
      </ChartContainer>
    </React.Fragment>
  )
}

To build out a typical chart, refer to the integration guide:

Size

By default, the chart will horizontally fill it's parent container.

Set the height of the ChartContainer by providing the height property a number value. Default height is 200px.

Screenshot of component ChartContainer height

<ChartContainer height={350}>
  {/* Linechart, domain, etc */}
  <VerticalAxis />
  <TimeAxis />
</ChartContainer>

Valid CSS sizing units are also accepted in string form, except for percentage based sizes. For example: 45rem, 500px, and viewport based sizing 20vh are valid:

<ChartContainer height="20vh">
  {/* ... */}
</ChartContainer>

To constrain the width, wrap the ChartContainer in an appropriately sized parent. div is used for demonstration purposes:

Screenshot of component ChartContainer width

<div style={{width: '250px'}}>
  <ChartContainer>
    {/* Linechart, domain, etc */}
    <VerticalAxis />
    <TimeAxis />
  </ChartContainer>
</div>

To force a width, provide a width value to the ChartContainer:

<ChartContainer width={300}>
  {/* Linechart, domain, etc */}
  <VerticalAxis />
  <TimeAxis />
</ChartContainer>

Draw Order

The render-order of a ChartContainer follows the order as written in the ChartContainer, from top to bottom.

Screenshot of component ChartContainer render-order-over

<ChartContainer>
  <LineChart dataSource={dataSource} color={Colors.RED5}/>
  <ScatterPlot
    dataSource={dataSource}
    accessor={(data, time) => ({ x: time, y: data })}
    color={Colors.BLACK}
  />
  {/* Axis, domain, etc */}
</ChartContainer>

Screenshot of component ChartContainer render-order-under

<ChartContainer>
  <ScatterPlot
    dataSource={dataSource}
    accessor={(data, time) => ({ x: time, y: data })}
    color={Colors.BLACK}
  />
  <LineChart dataSource={dataSource} color={Colors.RED5} />
  {/* Axis, domain, etc */}
</ChartContainer>

Prop Reference

Prop	Type	Optional	Description
children	ReactNode \| React.ReactNode[]	No	The chart children
dpr	number	Yes	The DPR override
height	CSSProperties["height"]	Yes	The height of the chart container. Either specify a value in pixels: `height={400}` or specify in viewport units `height="80vh"`. Percentage values are not valid, eg: `height="80%"` Default is 200px.
legacy	boolean	Yes	Whether to use WebGL1 instead of WebGL2
width	CSSProperties["width"]	Yes	The width of the chart container. If not set, will extend to the width of the container.