ChartWrapper

ChartWrapper - Wrapper component for charts with loading and empty states Handles three states: - Loading: Shows skeleton loader - No data: Shows empty state…

ChartWrapper - Wrapper component for charts with loading and empty states

Handles three states: - Loading: Shows skeleton loader - No data: Shows empty state placeholder - Has data: Shows chart content

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

Prop	Status	Type	Default	Description
`children`	Optional	`React.ReactNode`	—	Chart content to render
`data`	Optional	`unknown[] \| Record<string, unknown> \| undefined`	—	Chart data object (for LineChart with datasets)
`dataset`	Optional	`unknown[] \| Record<string, unknown> \| undefined`	—	Chart dataset (for BarChart with direct dataset)
`isLoading`	Optional	`boolean \| undefined`	`false`	Loading state
`customLoader`	Optional	`React.ReactNode`	—	Custom loader component to show when loading (overrides default spinner)
`showNoDataPlaceholder`	Optional	`boolean \| undefined`	`true`	Whether to show "no data" placeholder when data is empty
`customNoDataMessage`	Optional	`React.ReactNode`	—	Custom message or component to show when no data
`minHeight`	Optional	`number \| undefined`	—	Minimum height for the container (in pixels)
`loadingMinHeight`	Optional	`number \| undefined`	—	Minimum height for the loading skeleton (in pixels) Falls back to minHeight if not provided
`className`	Optional	`string \| undefined`	—	Custom className for the container

Usage

Wrapper that handles three states for a chart's content area:

Loading — shows a Loader skeleton (or custom node).
No data — shows an EmptyState placeholder.
Has data — shows the chart children.

Example

/** * Runnable example for ChartWrapper. * * The wrapper handles three states (loading skeleton, no-data placeholder, * has-data) so individual chart components don't need to repeat the logic. */import { ChartWrapper, LineChart } from '@tetherto/mdk-react-devkit'const chartData = {  labels: ['00:00', '01:00', '02:00', '03:00', '04:00', '05:00'],  datasets: [    {      label: 'Hashrate (TH/s)',      data: [102, 104, 103, 99, 101, 105],    },  ],}export const ChartWrapperExample = () => {  return (    <ChartWrapper data={chartData} isLoading={false} minHeight={300}>      <LineChart data={chartData as never} />    </ChartWrapper>  )}