Line Chart
A trend line chart for time-series and continuous data comparisons.
Installation
tsx
import { LineChart } 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 |
showDots | boolean | true | Show dots on data points |
type | "linear""natural""monotone""step" | "natural" | Curve interpolation type |
strokeWidth | number | 2 | Line stroke width in pixels |
RTL Support
Components automatically adapt to right-to-left languages using CSS logical properties.
Preview
Loading chart...
Usage
tsx
<LineChart
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
/>