Chart components
Data visualization components for mining metrics
Chart components for visualizing time-series data, metrics, and statistics. Built on Chart.js and Lightweight Charts.
Prerequisites
BarChart
Bar/column chart with gradient fills, stacking, and data labels. Built on Chart.js.
Import
import { BarChart } from '@tetherto/mdk-core-ui'Props
| Prop | Type | Default | Description |
|---|---|---|---|
data | ChartData | none | Required: Chart.js data object |
options | ChartOptions | none | Chart.js options (merged with defaults) |
isStacked | boolean | false | Stack bars on top of each other |
isHorizontal | boolean | false | Render bars horizontally |
showLegend | boolean | true | Show Chart.js legend |
legendPosition | 'top' | 'right' | 'bottom' | 'left' | 'top' | Legend position |
legendAlign | 'start' | 'center' | 'end' | 'start' | Legend alignment |
showDataLabels | boolean | false | Show values above bars |
formatYLabel | function | none | Format Y-axis tick labels |
formatDataLabel | function | none | Format data label values |
tooltip | ChartTooltipConfig | none | Custom HTML tooltip config |
height | number | 300 | Chart height in pixels |
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} />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)}%`}
/>LineChart
Time-series line chart built on Lightweight Charts for high-performance rendering.
Import
import { LineChart } from '@tetherto/mdk-core-ui'Props
| Prop | Type | Default | Description |
|---|---|---|---|
data | LineChartData | none | Required: Object with a datasets array (see data shape below) |
timeline | string | none | Timeline identifier |
height | number | 240 | Chart height in pixels |
backgroundColor | string | none | Chart background color |
unit | string | '' | Unit label for values |
beginAtZero | boolean | false | Start Y-axis at zero |
showPointMarkers | boolean | false | Show data point markers |
yTicksFormatter | function | none | Format Y-axis ticks |
priceFormatter | function | none | Format tooltip values |
customLabel | string | none | Custom tooltip label |
showDateInTooltip | boolean | false | Show date in tooltip |
uniformDistribution | boolean | false | Uniform time distribution |
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 Date’s 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 />AreaChart
Filled area chart for cumulative or range data.
Import
import { AreaChart } from '@tetherto/mdk-core-ui'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} />DoughnutChart
Doughnut/pie chart for proportional data.
Import
import { DoughnutChart } from '@tetherto/mdk-core-ui'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} />ChartContainer
Wrapper for charts with loading and empty states.
Import
import { ChartContainer } from '@tetherto/mdk-core-ui'Basic usage
<ChartContainer loading={isLoading} empty={data.length === 0}>
<BarChart data={data} />
</ChartContainer>ChartStatsFooter
Displays statistics below charts.
Import
import { ChartStatsFooter } from '@tetherto/mdk-core-ui'Basic usage
<ChartStatsFooter
stats={[
{ label: 'Min', value: '120 TH/s' },
{ label: 'Max', value: '180 TH/s' },
{ label: 'Avg', value: '150 TH/s' },
]}
/>DetailLegend
Detailed chart legend with values.
Import
import { DetailLegend } from '@tetherto/mdk-core-ui'Basic usage
<DetailLegend
items={[
{ label: 'Online', value: 85, color: '#72F59E' },
{ label: 'Offline', value: 15, color: '#FF6B6B' },
]}
/>Chart utilities
The package exports utilities for building chart configurations:
import {
defaultChartOptions,
defaultChartColors,
buildBarChartData,
buildBarChartOptions,
buildChartTooltip,
computeStats,
} from '@tetherto/mdk-core-ui'