Render simple bar, line, and area charts from tabular data.

Preview

code

1│     ▄▄2│  ▄▄ ██ ▄▄3│  ██ ██ ██4└─────────────5   Jan Feb Mar

Usage

1node := models.WidgetNode{2    Type:   models.WidgetNodeTypeChart,3    Height: 240,4    Data: []map[string]interface{}{5        {"date": "2025-01-01", "Desktop": 100, "Mobile": 200},6        {"date": "2025-01-02", "Desktop": 200, "Mobile": 100},7        {"date": "2025-01-03", "Desktop": 150, "Mobile": 150},8    },9    Series: []models.ChartSeries{10        {Type: "bar", DataKey: "Desktop"},11        {Type: "bar", DataKey: "Mobile"},12    },13    XAxis: "date",14}

Props

Name	Type	Description	Default
`type`	`"chart"`	Node type	required
`data`	`array`	Tabular dataset; each object is a data row	required
`series`	`ChartSeries[]`	Series definitions for rendering	required
`xAxis`	`string \| object`	X-axis configuration or data key	required
`height`	`number \| string`	Chart height	-
`width`	`number \| string`	Chart width	-
`showYAxis`	`boolean`	Show left y-axis with labels	`false`
`showLegend`	`boolean`	Display legend	`true`
`showTooltip`	`boolean`	Show tooltip on hover	`true`
`barGap`	`number`	Gap in px between bars in same category	-
`barCategoryGap`	`string`	Gap between bar categories	-

ChartSeries Types

BarSeries:

1{Type: "bar", DataKey: "Desktop", Label: "Desktop Users", Color: "blue"}

LineSeries:

1{Type: "line", DataKey: "Revenue", CurveType: "natural"}

AreaSeries:

1{Type: "area", DataKey: "Users", CurveType: "monotone", Stack: "total"}

Series Props

Name	Type	Description
`type`	`"bar" \| "line" \| "area"`	Series type
`dataKey`	`string`	Key in data rows for values
`label`	`string`	Legend/tooltip label
`color`	`string`	Color token or CSS color
`curveType`	`string`	Curve interpolation (line/area)
`stack`	`string`	Stack group ID (bar/area)

Color Tokens

blue, purple, orange, green, red, yellow, pink

Curve Types

linear, natural, monotone, step, stepBefore, stepAfter, basis, bump

Examples

Bar Chart

1{2    Type:   models.WidgetNodeTypeChart,3    Height: 200,4    Data: []map[string]interface{}{5        {"month": "Jan", "sales": 400},6        {"month": "Feb", "sales": 300},7        {"month": "Mar", "sales": 500},8    },9    Series: []models.ChartSeries{10        {Type: "bar", DataKey: "sales", Color: "blue"},11    },12    XAxis: "month",13}

Line Chart

1{2    Type:   models.WidgetNodeTypeChart,3    Height: 200,4    Data: []map[string]interface{}{5        {"date": "2025-01-01", "users": 100},6        {"date": "2025-01-02", "users": 150},7        {"date": "2025-01-03", "users": 120},8    },9    Series: []models.ChartSeries{10        {Type: "line", DataKey: "users", CurveType: "natural"},11    },12    XAxis:     "date",13    ShowYAxis: true,14}

Stacked Area Chart

1{2    Type:   models.WidgetNodeTypeChart,3    Height: 240,4    Data: data,5    Series: []models.ChartSeries{6        {Type: "area", DataKey: "Desktop", Stack: "total", Color: "blue"},7        {Type: "area", DataKey: "Mobile", Stack: "total", Color: "green"},8    },9    XAxis: "date",10}

Multi-series Comparison

1{2    Type:   models.WidgetNodeTypeChart,3    Height: 300,4    Data: monthlyData,5    Series: []models.ChartSeries{6        {Type: "bar", DataKey: "lastYear", Label: "Last Year", Color: "gray"},7        {Type: "bar", DataKey: "thisYear", Label: "This Year", Color: "blue"},8    },9    XAxis:      "month",10    ShowLegend: true,11}

TypeScript

typescript

1const node: WidgetNode = {2  type: "chart",3  height: 240,4  data: [5    { date: "2025-01-01", Desktop: 100, Mobile: 200 },6    { date: "2025-01-02", Desktop: 200, Mobile: 100 },7  ],8  series: [9    { type: "bar", dataKey: "Desktop" },10    { type: "bar", dataKey: "Mobile" },11  ],12  xAxis: "date",13}

Best Practices

Set explicit height - Charts need a defined height
Keep data concise - 5-20 data points is ideal
Use meaningful colors - Color-code related series
Show legend for multi-series - Help users understand data
Consider mobile - Charts may need adjusting for small screens