Small and fixed-height plots
Fit inspection, pins and keyboard hints inside a dashboard widget’s allocation.
TooltipadaptivedensitycompactHeight
A dashboard widget often gives a chart a fixed height, such as a 132px plot in a card that hides overflow. Two settings decide how inspection fits it. By default a chart narrower than 420px shows its values in a readout under the plot, and reserves that room even at rest (about 130px) so nothing jumps when inspection starts. That suits a page that can grow. For a fixed allocation, set adaptive={false}: the floating panel then stays inside the plot at every width.
The floating panel is never taller than the plot. With density="auto" (the default) it switches to a compact layout when the comfortable one would not fit: values in two columns, Unpin beside the date, and less padding. Custom renderContent bodies and pin actions follow the same rules; as a last resort the panel scrolls. Choose density="compact" or "comfortable" to fix it either way. Set compactHeight on ChartPlot to keep the same height below 420px.
Keyboard inspection fits too. While the observation slider has keyboard focus, the plot takes the focus ring and a shown tooltip carries the key hints in its footer, so a small plot holds one panel rather than two. Left and Right inspect, Up and Down switch series, Enter pins, Tab reaches Unpin, and Escape clears. Without a floating tooltip the slider panel shows the hints itself.
Cards handle this for you: their hover readouts are sized to the card. Reach for these settings when you compose a Chart into a space you do not control.
TypeScript
<ChartPlot height={132} compactHeight={132} pill={false}
tooltip={<Tooltip adaptive={false} />}>
{severities.map((key) => <Line key={key} series={key} />)}
</ChartPlot>