ChartContainer
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
.

<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:

<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.

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

<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 | Default | 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: 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. |