Chart composition

Compose chart types from Chart components with wrappers and helpers. ChartContainer adds title, loading, and empty states; ChartStatsFooter and DetailLegend add summary rows and rich legends (for example LineChartCard).

Prerequisites

• Complete the @tetherto/mdk-react-devkit installation and add the dependency

Components

ChartContainer

Wrapper for charts with loading and empty states.

Import

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

Props

Basic usage

<ChartContainer loading={isLoading} empty={data.length === 0}>
  <BarChart data={data} />
</ChartContainer>

ChartStatsFooter

Import

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

Props

The component renders nothing when minMaxAvg, stats, and secondaryLabel are all absent or empty.

Basic usage

<ChartStatsFooter
  stats={[
    { label: 'Min', value: '120 TH/s' },
    { label: 'Max', value: '180 TH/s' },
    { label: 'Avg', value: '150 TH/s' },
  ]}
/>

DetailLegend

Import

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

Props

Basic usage

<DetailLegend
  items={[
    { label: 'Online', color: '#72F59E', currentValue: { value: 85, unit: '%' } },
    { label: 'Offline', color: '#FF6B6B', currentValue: { value: 15, unit: '%' } },
  ]}
/>

MinMaxAvg

Compact summary row rendering min, max, and average values with MDK label and value styling. Items with empty values are omitted. Use standalone or via the minMaxAvg prop on ChartContainer.

Renders a compact, horizontally spaced row of min, max, and average values with MDK label and value styling. Only items with a non-empty value are rendered; the component returns null when all three are absent.

Pair it with ChartContainer via the minMaxAvg prop to attach the summary row below a chart automatically, or use MinMaxAvg standalone for custom layouts.

Import

import { MinMaxAvg } from '@tetherto/mdk-react-devkit/core'
import type { MinMaxAvgProps } from '@tetherto/mdk-react-devkit/core'

Props

Basic usage

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

<MinMaxAvg min="10 TH/s" max="100 TH/s" avg="55 TH/s" />

Via ChartContainer

Pass pre-formatted strings to the minMaxAvg prop on ChartContainer to mount MinMaxAvg in the chart footer automatically:

import { ChartContainer, LineChart, computeStats } from '@tetherto/mdk-react-devkit/core'

const { min, max, avg } = computeStats(values)
const fmt = (n: number) => `${n.toFixed(2)} TH/s`

<ChartContainer
  title="Hashrate"
  minMaxAvg={{ min: fmt(min), max: fmt(max), avg: fmt(avg) }}
>
  <LineChart data={chartData} />
</ChartContainer>

Use the computeStats utility (see Chart utilities) to compute the values from a numeric array before formatting them.

Styling

• .mdk-min-max-avg: Root element (role="group")
• .mdk-min-max-avg__item: Individual min / max / avg item
• .mdk-min-max-avg__label: Label text ("Min", "Max", "Avg")
• .mdk-min-max-avg__value: Value text

Chart utilities

Pure functions for building Chart.js data and options. Import from the package root alongside components.

import {
  defaultChartOptions,
  defaultChartColors,
  buildBarChartData,
  buildBarChartOptions,
  buildChartTooltip,
  computeStats,
} from '@tetherto/mdk-react-devkit/core'

Types BarChartInput, BarChartSeries, BarChartLine, and BarChartConstant are exported from the same package for hook-shaped bar data.

Hook-shaped bar data

App and reporting hooks often return declarative bar input instead of Chart.js data. buildBarChartData converts that shape into { labels, datasets } for BarChart. The pipeline:

1. Input (BarChartInput): optional labels, required series, optional lines and constants for mixed bar/line overlays.
2. Build (buildBarChartData): returns Chart.js data with MDK gradient styling and layout defaults (barWidth, categoryPercentage, barPercentage are optional on the input).
3. Data labels (optional): per-series overrides on the input (formatter, anchor, align, offset, font, padding, display, clamp, clip) map to each built dataset’s Chart.js datalabels by series index.
4. Render (<BarChart data={...} />): pass the built object to the component; pair with buildBarChartOptions when you need stacking, axes, or formatters.

BarChartInput shape

Each BarChartSeries uses values as either number[] (positional) or Record<string, number> (keyed by category label).

Example

Hook output to BarChart example:

import {
  BarChart,
  buildBarChartData,
  ChartContainer,
} from '@tetherto/mdk-react-devkit/core'

// Typical shape returned by app/reporting data hooks
const hookOutput = {
  labels: ['Q1', 'Q2', 'Q3'],
  series: [
    {
      label: 'Revenue',
      values: [4.2, 3.8, 5.1],
      color: '#72F59E',
      dataLabels: {
        formatter: (v: number) => `${v.toFixed(1)}M`,
        anchor: 'end',
        align: 'top',
      },
    },
    {
      label: 'OpEx',
      values: [1.8, 2.0, 1.6],
      color: '#FFD700',
    },
  ],
}

const cleanSeries = hookOutput.series.map(({ dataLabels: _dl, ...s }) => s)
const base = buildBarChartData({ labels: hookOutput.labels, series: cleanSeries })

const chartData = {
  labels: base.labels,
  datasets: base.datasets.map((dataset, i) => {
    const overrides = hookOutput.series[i]?.dataLabels
    return overrides ? { ...dataset, datalabels: overrides } : dataset
  }),
}

const isEmpty =
  !hookOutput.series.length ||
  hookOutput.series.every((s) => {
    const vals = Array.isArray(s.values) ? s.values : Object.values(s.values)
    return !vals.length || vals.every((v) => v === 0)
  })

<ChartContainer title="Quarterly" empty={isEmpty}>
  <BarChart data={chartData} />
</ChartContainer>

Empty and all-zero series

Treat bar data as empty when any of the following is true:

• series is missing or has length 0
• Every series has empty values (array or record)
• Every numeric value across all series is 0

Prefer ChartContainer empty or a placeholder instead of rendering a flat chart. After building Chart.js data, you can also use useChartDataCheck from @tetherto/mdk-react-devkit/foundation with { data: chartData }.