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.

tsx
import {
ChartContainer,
LineChart,
RealTimeDomain,
TimeAxis,
VerticalAxis
} from '@electricui/components-desktop-charts'
import { MessageDataSource } from '@electricui/core-timeseries'
 
const OverviewPage = () => {
const sensorDS = new MessageDataSource('speed')
 
return (
<React.Fragment>
<ChartContainer>
<LineChart dataSource={sensorDS} maxItems={200} />
<RealTimeDomain window={10000} delay={50} />
<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
tsx
<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:

tsx
<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
tsx
<div style={{width: '250px'}}>
<ChartContainer>
{/* Linechart, domain, etc */}
<VerticalAxis />
<TimeAxis />
</ChartContainer>
</div>

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

tsx
<ChartContainer width={300}>
{/* Linechart, domain, etc */}
<VerticalAxis />
<TimeAxis />
</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.

widthCSSProperties["width"]Yes

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