data-charting

Data Charting

Use this skill when the user asks to:

• Visualize metrics, trends, distributions, or proportions.
• Turn tabular/JSON data into charts.
• Compare multiple series over time or categories.
• Show thresholds, ranges, or baseline rules in charts.

This skill outputs chart markdown for the in-app message renderer (the chat message list UI) using fenced code blocks:

```chart
{ ...json... }
```

Core Rules

• Always output valid JSON inside ```chart blocks.
• Keep numeric fields as numbers, not strings.
• Keep each chart focused on one analytical question.
• Prefer concise titles and meaningful series names.
• If data is missing or ambiguous, state assumptions briefly before the chart.

Runtime Target

• Target renderer: any chat/message renderer that supports ```chart fenced blocks.
• Expected format: fenced code block with language tag chart and a JSON object.
• If unsure, still output the exact ```chart + JSON structure.

Supported Chart Types

Set kind to one of:

• line
• area
• bar
• point
• rule
• rectangle
• pie

JSON Schemas

1) line / area / bar / point

{
  "kind": "line",
  "title": "Weekly Visits",
  "height": 240,
  "line": {
    "x": ["Mon", "Tue", "Wed", "Thu", "Fri"],
    "series": [
      { "name": "PV", "y": [120, 180, 160, 220, 260] },
      { "name": "UV", "y": [80, 110, 105, 130, 150] }
    ]
  }
}

Notes:

• For area, replace line with area.
• For bar, replace line with bar.
• For point, replace line with point.
• Every series[i].y.count must equal x.count.

2) pie

{
  "kind": "pie",
  "title": "Traffic Source Share",
  "height": 240,
  "pie": {
    "items": [
      { "name": "Organic", "value": 45 },
      { "name": "Ads", "value": 35 },
      { "name": "Referral", "value": 20 }
    ]
  }
}

3) rule

{
  "kind": "rule",
  "title": "Alert Thresholds",
  "height": 220,
  "rule": {
    "yValues": [100, 180, 250]
  }
}