BarChart | MDK

Presentational Chart.js bar chart. Data must be pre-aggregated; use grouped or stacked categories via `datasets`.

Presentational Chart.js bar chart. Data must be pre-aggregated; use grouped or stacked categories via datasets.

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

Prop	Status	Type	Default	Description
`data`	Required	`any`	—	Chart data - required, provided by parent. Use `as any` for mixed bar+line datasets.
`options`	Optional	`_DeepPartialObject<CoreChartOptions<"bar"> & ElementChartOptions<"bar"> & PluginChartOptions<"bar"> & DatasetChartOptions<"bar"> & ScaleChartOptions<"bar"> & BarControllerChartOptions> \| undefined`	—	Chart.js options - merged with defaults
`isStacked`	Optional	`boolean \| undefined`	—	Stack bars on top of each other
`isHorizontal`	Optional	`boolean \| undefined`	—	Render bars horizontally (indexAxis: 'y')
`formatYLabel`	Optional	`((value: number) => string) \| undefined`	—	Format Y-axis tick labels
`showLegend`	Optional	`boolean \| undefined`	—	Show built-in Chart.js legend (default: true)
`legendPosition`	Optional	`Position \| undefined`	—	Position of the legend (default: 'top')
`legendAlign`	Optional	`FlexAlign \| undefined`	—	Alignment of the legend labels within their position (default: 'start')
`showDataLabels`	Optional	`boolean \| undefined`	—	Show values above each bar
`formatDataLabel`	Optional	`((value: number) => string) \| undefined`	—	Format data label values (default: round to nearest integer)
`tooltip`	Optional	`ChartTooltipConfig \| undefined`	—	Custom HTML tooltip configuration. When provided, replaces the default Chart.js tooltip.
`height`	Optional	`number \| undefined`	—	Chart height in pixels
`className`	Optional	`string \| undefined`	—	—

Usage

A Chart.js bar chart with gradient fills, optional stacking, horizontal layout, data labels, and a custom HTML tooltip.

Notes

Bar datasets automatically receive a vertical gradient fill derived from backgroundColor. Pass backgroundColor as a function to opt out.
For mixed bar + line charts pass the dataset type: 'line' inside data.datasets and use data typed as any.
showDataLabels adds chartjs-plugin-datalabels; it adds 20 px of top padding to prevent label clipping.

Example

/** * Runnable example for BarChart. */import { BarChart } from '@tetherto/mdk-react-devkit'const groupedData = {  labels: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],  datasets: [    {      label: 'Foundry EU',      data: [42, 38, 45, 50, 47, 30, 35],      backgroundColor: '#F7931A',    },    {      label: 'AntPool',      data: [28, 32, 29, 35, 33, 25, 27],      backgroundColor: '#4B9EFF',    },  ],}const stackedData = {  labels: ['Week 1', 'Week 2', 'Week 3', 'Week 4'],  datasets: [    { label: 'Accepted', data: [320, 340, 310, 360], backgroundColor: '#34C759' },    { label: 'Rejected', data: [12, 8, 15, 10], backgroundColor: '#FF3B30' },  ],}export const BarChartExample = () => (  <div className="mdk-example-col">    <BarChart data={groupedData} height={220} />    <BarChart data={stackedData} isStacked height={220} showDataLabels />  </div>)