Line Chart
DataMITMulti-series line chart with dot markers, legend, and tooltip.
bun add @otfdashkit/ui
Preview
Line ChartData
Loading Storybook preview…
Code
@otfdashkit/uiimport { LineChart } from '@otfdashkit/ui'
const MONTHLY_DATA = [
{ month: 'Jan', revenue: 4200, users: 240, churn: 12 },
{ month: 'Feb', revenue: 5800, users: 310, churn: 18 },
{ month: 'Mar', revenue: 5200, users: 290, churn: 9 },
{ month: 'Apr', revenue: 7100, users: 420, churn: 15 },
{ month: 'May', revenue: 8400, users: 510, churn: 22 },
{ month: 'Jun', revenue: 7600, users: 480, churn: 19 },
{ month: 'Jul', revenue: 9200, users: 580, churn: 28 },
{ month: 'Aug', revenue: 10400, users: 640, churn: 24 },
]
export function Example() {
return (
<LineChart data={MONTHLY_DATA} dataKey="revenue" xAxisKey="month" height={280} />
)
}
Free with the SDK. This component ships in @otfdashkit/ui under the MIT license.
Props
Props declared in the LineChart source. Inherited HTML attributes are not listed.
| Prop | Type | Default | Description |
|---|---|---|---|
| datarequired | Record<string, unknown>[] | ||
| dataKeyrequired | string | string[] | ||
| className | string | ||
| colors | string[] | ||
| curved | boolean | true | |
| dotted | boolean | false | |
| height | number | 300 | |
| showGrid | boolean | true | |
| showLegend | boolean | false | |
| showTooltip | boolean | true | |
| strokeWidth | number | 2 | |
| xAxisKey | string | 'name' |