Chart components

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

Prerequisites

Before using these components, complete the @mdk/core installation and add the dependency.

`BarChart`

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

Import

import { BarChart } from '@mdk/core'

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 '@mdk/core'

Props

Prop	Type	Default	Description
`data`	`LineDataset[]`	none	Required: Array of line datasets
`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`	`function`	none	Custom tooltip label
`showDateInTooltip`	`boolean`	`false`	Show date in tooltip
`uniformDistribution`	`boolean`	`false`	Uniform time distribution

Basic usage

const data = [
  {
    name: 'Hashrate',
    color: '#72F59E',
    data: [
      { time: 1704067200, value: 150 },
      { time: 1704153600, value: 155 },
      { time: 1704240000, value: 160 },
    ],
  },
]

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

Multiple lines

const data = [
  {
    name: 'Hashrate',
    color: '#72F59E',
    data: hashrateData,
  },
  {
    name: 'Target',
    color: '#FFD700',
    data: targetData,
  },
]

<LineChart data={data} showPointMarkers beginAtZero />

`AreaChart`

Filled area chart for cumulative or range data.

Import

import { AreaChart } from '@mdk/core'

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 '@mdk/core'

Basic usage

const data = {
  labels: ['Online', 'Offline', 'Maintenance'],
  datasets: [
    {
      data: [85, 10, 5],
      backgroundColor: ['#72F59E', '#FF6B6B', '#FFD700'],
    },
  ],
}

<DoughnutChart data={data} />

`GaugeChart`

Gauge/meter visualization for single values.

Import

import { GaugeChart } from '@mdk/core'

Basic usage

<GaugeChart
  value={75}
  max={100}
  label="Efficiency"
  unit="%"
/>

`ChartContainer`

Wrapper for charts with loading and empty states.

Import

import { ChartContainer } from '@mdk/core'

Basic usage

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

`ChartStatsFooter`

Displays statistics below charts.

Import

import { ChartStatsFooter } from '@mdk/core'

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 '@mdk/core'

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 '@mdk/core'

Chart components

On this page