ChartContainer

Standard chrome for charts: title, optional highlighted value, legend with toggle, range selector (radio cards), loading / empty states, and a footer for min…

Standard chrome for charts: title, optional highlighted value, legend with toggle, range selector (radio cards), loading / empty states, and a footer for min/max/avg stats.

import { ChartContainer } from "@tetherto/mdk-react-devkit";

Prop	Status	Type	Default	Description
`title`	Optional	`string \| undefined`	—	—
`titleExtra`	Optional	`React.ReactNode`	—	Optional node rendered immediately after the title text (e.g. an info tooltip). Only shown when `title` is set and `header` is not. Additive - omit it and the title renders exactly as before.
`header`	Optional	`React.ReactNode`	—	—
`headerAction`	Optional	`React.ReactNode`	—	Optional action rendered on the right side of the header row (e.g. an expand/fullscreen toggle). Sits alongside the range selector when both are present. Purely additive - omit it and the header renders exactly as before.
`legendData`	Optional	`LegendItem[] \| undefined`	—	—
`highlightedValue`	Optional	`HighlightedValueProps \| undefined`	—	—
`rangeSelector`	Optional	`RangeSelectorProps \| undefined`	—	—
`loading`	Optional	`boolean \| undefined`	—	—
`empty`	Optional	`boolean \| undefined`	—	—
`emptyMessage`	Optional	`string \| undefined`	—	—
`minMaxAvg`	Optional	`Partial<{ min: string; max: string; avg: string; }> \| undefined`	—	—
`timeRange`	Optional	`string \| undefined`	—	—
`footer`	Optional	`React.ReactNode`	—	—
`footerClassName`	Optional	`string \| undefined`	—	—
`className`	Optional	`string \| undefined`	—	—
`children`	Required	`React.ReactNode`	—	—
`onToggleDataset`	Optional	`((index: number) => void) \| undefined`	—	—

Usage

A layout wrapper for charts that provides a title/header row, interactive legend, range selector, highlighted value display, loading/empty states, and a stats footer.

Notes

minMaxAvg and timeRange are only rendered when the chart is not loading or empty.

Example

/** * Runnable example for ChartContainer. */import { useState } from 'react'import { ChartContainer } from '@tetherto/mdk-react-devkit'const RANGE_OPTIONS = [  { label: '1H', value: '1h' },  { label: '24H', value: '24h' },  { label: '7D', value: '7d' },]const LEGEND_DATA = [  { label: 'Pool A', color: '#59E8E8' },  { label: 'Pool B', color: '#FF9500' },]const MockChart = () => (  <div    style={{      height: 160,      background: 'var(--mdk-color-surface-secondary, #1a1a2e)',      borderRadius: 4,      display: 'flex',      alignItems: 'center',      justifyContent: 'center',      color: 'var(--mdk-color-text-secondary, #888)',      fontSize: 13,    }}  >    Chart content  </div>)export const ChartContainerExample = () => {  const [range, setRange] = useState('24h')  return (    <div className="mdk-example-row" style={{ display: 'flex', flexDirection: 'column', gap: 24 }}>      {/* Basic with title only */}      <ChartContainer title="Simple Chart">        <MockChart />      </ChartContainer>      {/* Full-featured: highlighted value, legend, range selector, min/max/avg */}      <ChartContainer        title="Hashrate"        highlightedValue={{ value: 102.4, unit: 'TH/s' }}        legendData={LEGEND_DATA}        rangeSelector={{ options: RANGE_OPTIONS, value: range, onChange: setRange }}        minMaxAvg={{ min: '10 TH/s', avg: '55 TH/s', max: '100 TH/s' }}      >        <MockChart />      </ChartContainer>      {/* Loading state */}      <ChartContainer title="Loading" loading>        <MockChart />      </ChartContainer>      {/* Empty state */}      <ChartContainer title="No Data" empty emptyMessage="No data available for this period">        <MockChart />      </ChartContainer>    </div>  )}