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)
• 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 />