Chart

Components for data visualization and charting.

Prerequisites

Install the packages

npm install \
  @tetherto/mdk-react-devkit \
  @tetherto/mdk-react-adapter \
  @tetherto/mdk-ui-foundation

Install zod@^4.6.6 first. @tetherto/mdk-react-devkit@0.12.1 declares zod@^4.6.6 as a peer while its @hookform/resolvers peer pulls a chain that pins zod 3, so the command above aborts with ERESOLVE in a project that has no zod. Installing zod 4 at the project root resolves it:

npm install zod@^4.6.6

Import styles: import '@tetherto/mdk-react-devkit/styles.css'

Components

@tetherto/mdk-react-devkit

Chart container

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

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>
  )
}

useChartDataCheck

@tetherto/mdk-react-devkit

Import the public APIs on this page from @tetherto/mdk-react-devkit.

`AreaChart`

Presentational Chart.js area chart (Line with fill). Data must be provided via props; this component does no fetching of its own

agent-ready

Source

Prop	Status	Type / Options	Default	Description
`data`	Required	`ChartData<"line", (number \| Point \| null)[], unknown>`	-	Chart data - required, provided by parent
`className`	Optional	`string`	-	Additional class names
`height`	Optional	`number`	`300`	Chart height in pixels
`options`	Optional	`object`	-	Chart.js options - merged with defaults
`tooltip`	Optional	`ChartTooltipConfig`	-	Custom HTML tooltip configuration. When provided, replaces the default Chart.js tooltip

Prop	Status	Type / Options	Default	Description
`barWidth`	Optional	`number`	`38`	Max bar thickness
`className`	Optional	`string`	-	Extra class on the container
`data`	Optional	`AverageDowntimeChartData`	-	Period labels and rate arrays (fractions 0–1)
`emptyMessage`	Optional	`string`	-	Message when there are no period labels or rate series
`height`	Optional	`number`	`280`	Chart height in pixels
`isLoading`	Optional	`boolean`	`false`	Shows loading overlay
`showDataLabels`	Optional	`boolean`	`false`	Show values above stacked bars
`title`	Optional	`string`	`"Monthly Average Downtime"`	Chart title (unit renders on its own line below)
`unit`	Optional	`string`	`%`	Unit subtitle under the title
`yTicksFormatter`	Optional	`(value: number) => string`	-	Formats Y-axis ticks, tooltips, and bar data labels (values are 0–1 rates). Defaults to rate × 100 via `formatNumber`

Prop	Status	Type / Options	Default	Description
`labels`	Required	`string[]`	-	X-axis period labels, one per bar; empty renders the empty state
`curtailment`	Optional	`number[]`	-	"Curtailment" downtime rate per period, as a fraction (0–1), aligned to `labels`
`operationalIssues`	Optional	`number[]`	-	"Op. Issues" downtime rate per period, as a fraction (0–1), stacked on `curtailment`

Prop	Status	Type / Options	Default	Description
`data`	Required	`any`	-	Chart data - required, provided by parent. Use `as any` for mixed bar+line datasets
`className`	Optional	`string`	-	Additional class for the wrapper `div`
`formatDataLabel`	Optional	`((value: number) => string)`	-	Format data label values (default: round to nearest integer)
`formatYLabel`	Optional	`((value: number) => string)`	-	Format Y-axis tick labels
`height`	Optional	`number`	`300`	Chart height in pixels
`isHorizontal`	Optional	`boolean`	`false`	Render bars horizontally (indexAxis: 'y')
`isStacked`	Optional	`boolean`	`false`	Stack bars on top of each other
`legendAlign`	Optional	`"center" \| "start" \| "end"`	`"start"`	Alignment of the legend labels within their position
`legendPosition`	Optional	`"left" \| "right" \| "top" \| "bottom"`	`"top"`	Position of the legend
`options`	Optional	`object`	-	Chart.js options - merged with defaults
`showDataLabels`	Optional	`boolean`	`false`	Show values above each bar
`showLegend`	Optional	`boolean`	`true`	Show built-in Chart.js legend
`tooltip`	Optional	`ChartTooltipConfig`	-	Custom HTML tooltip configuration. When provided, replaces the default Chart.js tooltip

On this page