Chart components

Chart components for visualizing time-series data, metrics, and statistics. Built on Chart.js and Lightweight Charts, supporting:

• Chart types: components that render datasets (AreaChart, BarChart, DoughnutChart, GaugeChart, LineChart)
• Domain chart wrappers: opinionated chart components with preset layouts and series config (AverageDowntimeChart, ThresholdLineChart, OperationsEnergyCostChart)
• Composition elements: layout chrome, legends, stats rows, and chart utilities (ChartContainer, ChartStatsFooter, DetailLegend, helpers)

Prerequisites

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

All chart type components

AreaChart

Filled area chart for cumulative or range data.

Presentational Chart.js area chart (line series with fill). Data and options follow the same Chart.js model as LineChart, without a separate MDK data wrapper type.

Import

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

Props

Basic usage

const data = {
  labels: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri'],
  datasets: [
    {
      label: 'Revenue',
      data: [100, 120, 115, 134, 168],
      fill: true,
      backgroundColor: 'rgba(114, 245, 158, 0.2)',
      borderColor: '#72F59E',
    },
  ],
}

<AreaChart data={data} />

BarChart

Bar/column chart with gradient fills, stacking, and data labels. Built on Chart.js.

The BarChart component renders Chart.js bar or column series. It manages:

1. Data (data): labels and datasets passed to Chart.js.
2. Chart options (options): merged with MDK defaults.
3. Formatting (formatYLabel, formatDataLabel, tooltip): axis labels, data labels, and HTML tooltips.
4. Presentation (isStacked, isHorizontal, showLegend, legendPosition, legendAlign, showDataLabels): layout and legend.
5. Size (height): chart height in pixels.

Import

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

Props

Basic usage

const data = {
  labels: ['Jan', 'Feb', 'Mar', 'Apr'],
  datasets: [
    {
      label: 'Hashrate (TH/s)',
      data: [120, 150, 180, 200],
      backgroundColor: '#72F59E',
    },
  ],
}

<BarChart data={data} height={300} />

Data from hooks

Hand-built Chart.js data (above) is valid. When app hooks return { labels, series } declarative input, convert with buildBarChartData in chart utilities, optionally merge per-series datalabels, then pass the result to data.

Stacked bar chart

const data = {
  labels: ['Site A', 'Site B', 'Site C'],
  datasets: [
    { label: 'Online', data: [100, 80, 120], backgroundColor: '#72F59E' },
    { label: 'Offline', data: [10, 20, 5], backgroundColor: '#FF6B6B' },
  ],
}

<BarChart data={data} isStacked />

Horizontal bar chart

<BarChart
  data={data}
  isHorizontal
  formatYLabel={(value) => `${value} TH/s`}
/>

With data labels

<BarChart
  data={data}
  showDataLabels
  formatDataLabel={(value) => `${value.toFixed(1)}%`}
/>

DoughnutChart

Doughnut/pie chart for proportional data.

Import

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

Props

Data shape for doughnut charts

Pass data as an array of { label, value, color? }. The chart maps this into Chart.js internally (labels, single dataset, segment colors). Omit color to use the default palette rotation.

Basic usage

const data = [
  { label: 'Online', value: 85, color: '#72F59E' },
  { label: 'Offline', value: 10, color: '#FF6B6B' },
  { label: 'Maintenance', value: 5, color: '#FFD700' },
]

<DoughnutChart data={data} />

GaugeChart

Speedometer-style presentational arc gauge for displaying a single normalized value, providing:

1. Percent (percent): fill level from 0 to 1 (values outside that range are clamped).
2. Arc appearance (colors, arcWidth, nrOfLevels): segment colors, relative thickness, and segment count.
3. Center label (hideText): percentage text in the center of the gauge (hidden when hideText is true).
4. Accessibility (id): stable id wired into SVG labels (defaults to mdk-gauge-chart).
5. Layout (height, maxWidth, className): container height, max width, and host root class.

SVG speedometer-style gauge driven by a 0–1 percent value.

Import

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

The gauge is driven by a normalized percent in the range 0–1 (for example 0.75 is 75%). It is not a value / max API, and it does not accept label or unit props (see ChartContainer for layout notes).

Props

Basic usage

<GaugeChart percent={0.75} />

In a chart card (same shell as other charts)

ChartContainer adds title, loading, and empty chrome; it does not apply overflow: hidden to the chart body. When you still see bleed next to siblings or footers, wrap GaugeChart in an extra element with overflow: hidden.

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

<ChartContainer title="Utilization" loading={false} empty={false}>
  <div style={{ overflow: 'hidden' }}>
    <GaugeChart percent={0.75} />
  </div>
</ChartContainer>

Custom colors and arc

<GaugeChart
  percent={0.6}
  colors={['#72F59E', '#FFD700', '#FF6B6B']}
  arcWidth={0.25}
  nrOfLevels={3}
  hideText={false}
  height={220}
/>

LineChart

Time-series line chart built on Lightweight Charts for high-performance rendering.

The LineChart component renders time-series lines. It manages:

1. Series data (data): LineChartData with millisecond x values (see data shape).
2. Context (timeline, unit): timeline identifier and unit label for tooltips.
3. Formatting (yTicksFormatter, priceFormatter, customLabel): tick and tooltip text.
4. Presentation (backgroundColor, beginAtZero, showPointMarkers, showDateInTooltip, uniformDistribution): axis and marker behavior.
5. Size (height): chart height in pixels.

Import

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

Props

Data shape for line charts

LineChartData is { datasets: LineDataset[] }. Each LineDataset has label, borderColor, optional visible / borderWidth / extraTooltipData, and data: { x, y }[] where x is a time value in milliseconds (for example from Date.prototype.valueOf()) and y is the series value (number, or null / undefined for gaps).

Basic usage

const data = {
  datasets: [
    {
      label: 'Hashrate',
      borderColor: '#72F59E',
      data: [
        { x: 1704067200000, y: 150 },
        { x: 1704153600000, y: 155 },
        { x: 1704240000000, y: 160 },
      ],
    },
  ],
}

<LineChart data={data} height={300} unit="TH/s" />

Multiple lines

const hashrateData = [
  { x: 1704067200000, y: 150 },
  { x: 1704153600000, y: 155 },
]
const targetData = [
  { x: 1704067200000, y: 140 },
  { x: 1704153600000, y: 145 },
]

const data = {
  datasets: [
    {
      label: 'Hashrate',
      borderColor: '#72F59E',
      data: hashrateData,
    },
    {
      label: 'Target',
      borderColor: '#FFD700',
      data: targetData,
    },
  ],
}

<LineChart data={data} showPointMarkers beginAtZero />

AverageDowntimeChart

Opinionated stacked bar chart wrapping ChartContainer and BarChart with domain-specific downtime series and a rate formatter.

Stacked bar chart showing monthly average downtime broken into Curtailment and Op. Issues series. Wraps ChartContainer and BarChart. It manages:

1. Data (data): period labels and per-series rate arrays (values are fractions 0–1).
2. Formatting (yTicksFormatter): formats Y-axis ticks, tooltips, and optional bar data labels.
3. Presentation (showDataLabels, title, unit): bar data labels and header text.
4. Layout (height, barWidth): chart height and bar width in pixels.
5. State (isLoading, emptyMessage): loading overlay and empty-state copy.

Import

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

Props

Data shape for AverageDowntimeChart

Pass data as an AverageDowntimeChartData object:

Both series arrays are optional; absent series are omitted from the chart.

Basic usage

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

<AverageDowntimeChart
  data={{
    labels: ['Jan', 'Feb', 'Mar'],
    curtailment: [0.02, 0.01, 0.03],
    operationalIssues: [0.05, 0.04, 0.06],
  }}
/>

Custom formatter

yTicksFormatter receives raw 0–1 rate values and must return a display string. The default (defaultAverageDowntimeRateFormatter) multiplies by 100 and appends %:

import {
  AverageDowntimeChart,
  defaultAverageDowntimeRateFormatter,
} from '@tetherto/mdk-react-devkit/core'

// Override: show one decimal place
<AverageDowntimeChart
  data={data}
  yTicksFormatter={(rate) => `${(rate * 100).toFixed(1)}%`}
  showDataLabels
/>

Exported helpers

ThresholdLineChart

Time-series line chart wrapping ChartContainer and LineChart, with support for optional horizontal threshold reference lines and interactive legend toggles.

Time-series line chart with optional horizontal threshold bands. Wraps ChartContainer and LineChart. It manages:

1. Data (data): one or more line series plus optional threshold lines.
2. Formatting (yTicksFormatter): formats Y-axis ticks.
3. Presentation (title, unit, isTall, isLegendVisible): header, height variant, and legend toggle.
4. Layout (height): explicit chart height in pixels (overrides isTall).
5. State (emptyMessage): empty-state copy.

Import

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

Props

Data shape for ThresholdLineChart

ThresholdLineChartData holds series and optional threshold lines:

Each ThresholdLineChartSeries:

Each ThresholdLineChartThreshold:

Basic usage

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

<ThresholdLineChart
  title="Power Consumption"
  unit="MW"
  data={{
    series: [
      {
        label: 'Actual',
        color: '#72F59E',
        points: [
          { timestamp: '2025-01-01', value: 32 },
          { timestamp: '2025-01-02', value: 35 },
          { timestamp: '2025-01-03', value: 29 },
        ],
      },
    ],
    thresholds: [
      { label: 'Capacity limit', value: 38, color: '#FF6B6B' },
    ],
  }}
/>

Tall variant

<ThresholdLineChart
  title="Hashrate"
  unit="TH/s"
  isTall
  data={data}
/>

Exported helpers

OperationsEnergyCostChart

Doughnut chart wrapping ChartContainer and DoughnutChart for operations vs energy cost breakdown in USD per MWh.

Doughnut chart comparing operational costs against energy costs in USD per MWh. Wraps ChartContainer and DoughnutChart. It manages:

1. Data (data): operational and energy cost values in USD.
2. Presentation (title, unit): header text and unit label.
3. Layout (height): chart height in pixels.
4. State (isLoading, emptyMessage): loading overlay and empty-state copy.

Import

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

Props

Data shape for OperationsEnergyCostChart

OperationsEnergyCostChartData has two optional numeric fields:

Both fields are optional. Slices with a zero or absent value are omitted from the doughnut.

Basic usage

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

<OperationsEnergyCostChart
  data={{
    operationalCostsUSD: 1200,
    energyCostsUSD: 4800,
  }}
/>

Exported helpers