Bar Chart
A column chart for comparing discrete values across categories.
Installation
tsx
import { BarChart } from "madagent";Default
Loading chart...
Props
| Prop | Type | Default | Description |
|---|---|---|---|
data* | Record<string, unknown>[] | - | The chart data array |
xAxisKey* | string | - | The data key used for the x-axis |
config* | ChartConfig | - | Maps each series key to a label and color |
showGrid | boolean | true | Show the cartesian grid |
showTooltip | boolean | true | Show the tooltip on hover |
showLegend | boolean | false | Show the chart legend |
showYAxis | boolean | false | Show the y-axis |
height | number | 350 | Container height in pixels |
stacked | boolean | false | Use stacked bars |
horizontal | boolean | false | Render bars horizontally |
radius | number | 8 | Bar corner radius in pixels |
RTL Support
Components automatically adapt to right-to-left languages using CSS logical properties.
Preview
Loading chart...
Usage
tsx
<BarChart
data={[
{ month: "يناير", desktop: 186, mobile: 80 },
{ month: "فبراير", desktop: 305, mobile: 200 },
{ month: "مارس", desktop: 237, mobile: 120 },
]}
xAxisKey="month"
config={{
desktop: { label: "سطح المكتب", color: "var(--md-chart-1)" },
mobile: { label: "الجوال", color: "var(--md-chart-2)" },
}}
height={300}
showLegend
/>