Chart data
The type of the datum type held in a series
The type of the series style
The type of the tooltip metadata (the data about the series). If not specified, defaults to an empty object
<Chart
width={useGridCellWidth()}
height={useGridCellHeight()}
margin={{...defaultMargin, top: 60, right: 75, left: 70}}
color={theme.color}
backgroundColor={theme.backgroundColor}
seriesStyles={new Map([
['neuron1', {
...defaultLineStyle,
color: 'orange',
lineWidth: 2,
highlightColor: 'orange'
}],
['neuron6', {
...defaultLineStyle,
color: theme.name === 'light' ? 'blue' : 'gray',
lineWidth: 3,
highlightColor: theme.name === 'light' ? 'blue' : 'gray',
highlightWidth: 5
}],
])}
initialData={initialDataRef.current}
seriesFilter={filter}
seriesObservable={observableRef.current}
shouldSubscribe={running}
onUpdateTime={handleChartTimeUpdate}
windowingTime={150}
>
<ContinuousAxis
axisId="x-axis-1"
location={AxisLocation.Bottom}
domain={[0, 5000]}
label="t (ms)"
/>
<CategoryAxis
axisId="y-axis-1"
location={AxisLocation.Left}
categories={initialDataRef.current.map(series => series.name)}
label="neuron"
/>
<CategoryAxis
axisId="y-axis-2"
location={AxisLocation.Right}
categories={initialDataRef.current.map(series => series.name)}
label="neuron"
/>
<Tracker
visible={visibility.tracker}
labelLocation={TrackerLabelLocation.WithMouse}
style={{color: theme.color}}
font={{color: theme.color}}
/>
<Tooltip
visible={visibility.tooltip}
style={{
fontColor: theme.color,
backgroundColor: theme.backgroundColor,
borderColor: theme.color,
backgroundOpacity: 0.9,
}}
>
<RasterPlotTooltipContent
xFormatter={value => formatNumber(value, " ,.0f") + ' ms'}
yFormatter={value => formatNumber(value, " ,.1f") + ' mV'}
/>
</Tooltip>
<RasterPlot
spikeMargin={1}
dropDataAfter={5000}
panEnabled={true}
zoomEnabled={true}
zoomKeyModifiersRequired={true}
/>
</Chart>
The chart container that holds the axes, plot, tracker, and tooltip. The chart manages the subscription, sets up the useChart hook via the ChartProvider.