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.

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

PropTypeDefaultOptionalDescription
childrenReactNode | React.ReactNode[]No

The chart children

dprnumberYes

The DPR override

heightCSSProperties["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.

legacybooleanYes

Whether to use WebGL1 instead of WebGL2

widthCSSProperties["width"]Yes

The width of the chart container. If not set, will extend to the width of the container.