LineChart

Customisable Chart.js line chart with built-in zoom, tooltip, and legend. Data is passed via props; the component does no fetching.

import { LineChart } from "@tetherto/mdk-react-devkit";

Prop	Status	Type	Default	Description
`chartRef`	Optional	`React.MutableRefObject<IChartApi \| null> \| undefined`	—	Mutable ref to hold the LightWeightCharts reference
`data`	Required	`LineChartData`	—	Data of the chart
`yTicksFormatter`	Optional	`((value: number) => string) \| undefined`	—	Callback to format ticks on y axis. If `priceFormatter` is given. It would be used instead.
`customLabel`	Optional	`string \| undefined`	—	TODO: Doc
`priceFormatter`	Optional	`((value: number) => string) \| undefined`	—	Callback to format ticks on y axis.
`roundPrecision`	Optional	`number \| undefined`	—	The number of decimals to show
`timeline`	Optional	`string \| undefined`	—	TODO: DOC
`fixedTimezone`	Optional	`string \| undefined`	—	Applies offset if provided, otherwise timestamps are assumed to already be in local time. Otherwise, use browser's current timezone offset for consistent time display
`shouldResetZoom`	Optional	`boolean \| undefined`	—	Wether to Reset Zoom
`skipRound`	Optional	`boolean \| undefined`	—	Prevent rounding of values
`skipMinWidth`	Optional	`boolean \| undefined`	—	Do not enforce a min width
`fadedBackground`	Optional	`boolean \| undefined`	—	Use a faded background
`backgroundColor`	Optional	`string \| undefined`	—	Background color of the chart
`customDateFormat`	Optional	`string \| undefined`	—	Custom date format
`verticalLineLabelVisible`	Optional	`boolean \| undefined`	—	Show vertical line at mouse position
`horizontalLineLabelVisible`	Optional	`boolean \| undefined`	—	Show horizontal line at mouse position
`showDateInTooltip`	Optional	`boolean \| undefined`	—	Show date line in tooltip
`disableAutoRange`	Optional	`boolean \| undefined`	—	Disable automatically determining range
`uniformDistribution`	Optional	`boolean \| undefined`	—	Changes horizontal scale marks generation. With this flag equal to true, marks of the same weight are either all drawn or none are drawn at all.
`unit`	Optional	`string \| undefined`	—	The unit to display with values
`beginAtZero`	Optional	`boolean \| undefined`	—	Starts the value axis at 0
`showPointMarkers`	Optional	`boolean \| undefined`	—	Show a marker on the line
`height`	Optional	`number \| undefined`	—	Controls the height of the chart. Default: 240

Usage

Time-series line chart built on lightweight-charts. Supports multi-series data, custom tooltips, vertical / horizontal crosshair labels, manual zoom, point markers, fixed-timezone formatting, and auto-scaling.

For most use cases prefer wrapping in ChartContainer or LineChartCard so you get title, legend, range selector, and loading / empty states for free.

Key props

Prop	Type	Required	Default	Description
`data`	`LineChartData`	yes	—	`{ datasets: LineDataset[] }`.
`chartRef`	`MutableRefObject<IChartApi \| null>`	no	—	Hold the underlying chart API.
`yTicksFormatter`	`(value: number) => string`	no	—	Y-axis tick formatter.
`priceFormatter`	`(value: number) => string`	no	—	Take-precedence formatter.
`timeline`	`string`	no	—	Current timeline (drives auto-fit).
`fixedTimezone`	`string`	no	—	IANA timezone (applies offset).
`unit`	`string`	no	`""`	Unit appended in tooltips.
`height`	`number`	no	`240`	Pixel height.

See types.ts for the full prop set (20+ props).

Data contracts

type LineDataPoint = { x: number; y: number | null | undefined };
type LineDataset = {
  label?: string;
  visible?: boolean;
  borderColor: string;
  borderWidth?: number;
  data: LineDataPoint[];
};
type LineChartData = { datasets: LineDataset[] };

Example

/** * Runnable example for LineChart. */import { LineChart } from '@tetherto/mdk-react-devkit'const NOW = Date.now()const MIN = 60 * 1000const points = Array.from({ length: 90 }, (_, i) => ({  x: NOW - (90 - i) * MIN,  y: 50 + Math.sin(i / 8) * 6 + Math.random() * 1.2,}))const data = {  datasets: [    {      label: 'Hashrate',      borderColor: '#4f9ef5',      borderWidth: 2,      data: points,    },  ],}export const LineChartExample = () => {  return <LineChart data={data} height={320} unit="TH/s" />}