Intro:
Your agent is a data powerhouse. It connects to APIs, pulls reports, and processes complex queries. But too often, the output looks something like this:
For the end users, this requires the user to actively parse, compare, and mentally visualize trends.
Now with the new Copilot Studio Run time engine, we could leverage Skills to enable this visualisation.
The "Data Visualization & Response Formatting": SkillMd
I've crafted a comprehensive SkillMd (a markdown-based skill definition) that you can drop directly into your Copilot Studio agent. This skill empowers your agent to:
Automatically Detect Data: When a response contains quantifiable data, the skill kicks in.
Smartly Select Charts: It intelligently chooses the best chart type (Pie, Bar, Line, etc.) based on the data's structure.
Render Visuals: It generates beautiful, interactive charts using Mermaid diagrams (which Copilot Studio supports natively!).
Pair with Precision: Every chart is accompanied by a precise markdown table for those who need exact figures.
Deliver Key Insights: It summarizes the most important trends and observations in plain language.
Propose Next Steps: It proactively suggests follow-up questions for deeper analysis.
In essence, this skill turns numbers into narratives. Anytime the agent detects data worth seeing — not just reading — it renders the right chart, pairs it with a precise table, and explains what the numbers mean. It activates automatically, so analysts and leadership get visual-first answers without having to ask.
markdown
# Skill: Data Visualization & Response Formatting
## Description
This skill enables the agent to render data points, metrics, and comparisons as **visual charts and graphs** alongside structured markdown tables. When a response involves quantifiable data (e.g., revenue, units, growth rates, period comparisons), the agent automatically selects the most appropriate chart type and renders it using supported formats such as **Mermaid diagrams**, **HTML/Chart.js snippets**, or **Python code blocks** (matplotlib/plotly) depending on the platform capabilities.
## When this skill is activated:
1. Identify that the user's query involves **quantifiable data points** (e.g., revenue, volume, rates, comparisons across periods or categories).
2. Determine the **most appropriate chart type** based on the data structure (see Chart Selection Guide below).
3. Render the chart using the best available format (Mermaid preferred for markdown environments).
4. Accompany every chart with a **supporting markdown table** containing the exact figures for reference and accessibility.
5. Provide a **"Key Insights"** section summarizing notable trends, highlights, or concerns in plain language.
6. End with a **proactive follow-up question** offering the user a logical next step for deeper analysis.
## Chart Selection Guide
| Data Scenario | Recommended Chart | When to Use |
|---|---|---|
| Comparing values across categories | **Bar Chart** (vertical) | 2–8 categories, single or dual metric |
| Showing change over time | **Line Chart** | 3+ time periods, trend identification |
| Showing proportion or share | **Pie / Donut Chart** | 2–6 categories, parts of a whole |
| Comparing two periods side by side | **Grouped Bar Chart** | Period-over-period comparison |
| Showing ranking or sorted performance | **Horizontal Bar Chart** | Ranking items by a single metric |
| Displaying distribution or variance | **Stacked Bar Chart** | Breakdown of a total across sub-categories |
| Single KPI or headline metric | **KPI Card (bold text block)** | One standout number with context |
## Rendering Formats (Priority Order)
### 1. Mermaid Diagrams (Preferred)
Use Mermaid syntax for environments that support it. Wrap in a fenced code block with `mermaid` language tag.
**Bar Chart Example:**
~~~
mermaid
xychart-beta
title "Sales by Category — Current vs Prior Period"
x-axis ["Category A", "Category B"]
y-axis "Value" 0 --> 100
bar [64.5, 16.4]
bar [67.9, 16.2]
~~~plaintext
**Pie Chart Example:**
~~~
mermaid
pie title Share by Category — Current Period
"Category A" : 54
"Category B" : 31
"Category C" : 15
~~~plaintext
**Line Chart Example:**
~~~
mermaid
xychart-beta
title "Performance Trend Over Time"
x-axis ["Period 1", "Period 2", "Period 3", "Period 4", "Period 5", "Period 6"]
y-axis "Value" 50 --> 90
line [62.3, 68.1, 71.4, 65.9, 67.9, 70.2]
~~~python
### 2. Python Code Blocks (Fallback)
If Mermaid is not supported, provide a ready-to-run Python code block using `matplotlib` or `plotly`.
~~~
python
import matplotlib.pyplot as plt
categories = ['Category A', 'Category B']
current = [64.5, 16.4]
prior = [67.9, 16.2]
x = range(len(categories))
width = 0.35
fig, ax = plt.subplots()
ax.bar([i - width/2 for i in x], current, width, label='Current Period', color='#1a1a1a')
ax.bar([i + width/2 for i in x], prior, width, label='Prior Period', color='#c4a35a')
ax.set_ylabel('Value')
ax.set_title('Performance — Current vs Prior Period')
ax.set_xticks(x)
ax.set_xticklabels(categories)
ax.legend()
plt.tight_layout()
plt.show()
~~~html
### 3. HTML/Chart.js Snippet (Web Environments)
For web-based agent interfaces that render HTML.
## Formatting & Style Rules
- **Always pair a chart with a data table** — charts for quick visual insight, tables for exact numbers.
- **Chart titles** must clearly state: metric, period, and unit of measure (e.g., *"Revenue — Current vs Prior Period (USD)"*).
- **Number formatting** in tables:
- Currency: `$XX,XXX,XXX` (with commas)
- Units: `XX,XXX` (with commas)
- Percentages: `+X.X%` or `-X.X%` (always show sign)
- Changes: prefix with `+` or `-` to indicate direction
- **Key Insights** should be **2–4 bullet points**, each tied to a specific visual observation.
- **Follow-up suggestions** should guide toward deeper or adjacent analysis.
## Examples
### Example 1: Multi-Category Period Comparison (Bar Chart + Table)
**User request:** *"Show me Category A and Category B results for the current period vs the prior period"*
**Expected behavior:**
> The agent renders a **grouped bar chart** comparing both categories across the two periods, followed by a detailed table:
~~~
mermaid
xychart-beta
title "Revenue — Current vs Prior Period"
x-axis ["Category A", "Category B"]
y-axis "Revenue" 0 --> 80
bar [64.5, 16.4]
bar [67.9, 16.2]
~~~markdown
> **Revenue Summary**
>
> | Category | Current Period | Prior Period | Change ($) | Change (%) |
> |----------|---------------|--------------|------------|------------|
> | Category A | $64,461,922 | $67,850,448 | -$3,388,526 | -5.0% |
> | Category B | $16,449,638 | $16,162,736 | +$286,901 | +1.8% |
>
> **Key Insights**
> - **Category A** declined 5.0% — visible in the chart as a shorter bar vs the prior period.
> - **Category B** grew modestly at +1.8%, nearly flat visually but positive momentum.
>
> *Would you like a deeper breakdown by sub-category or a trend view across multiple periods?*
### Example 2: Trend Over Time (Line Chart)
**User request:** *"Show me the performance trend for the last 6 periods"*
**Expected behavior:**
> The agent renders a **line chart** showing the trajectory, followed by the data table:
~~~
mermaid
xychart-beta
title "Performance Trend — Last 6 Periods"
x-axis ["P1", "P2", "P3", "P4", "P5", "P6"]
y-axis "Value" 50 --> 90
line [62.3, 67.9, 70.2, 74.5, 68.1, 64.5]
~~~markdown
> | Period | Value | Period-over-Period Change (%) |
> |--------|-------|------------------------------|
> | P1 | $62,300,000 | — |
> | P2 | $67,900,000 | +9.0% |
> | P3 | $70,200,000 | +3.4% |
> | P4 | $74,500,000 | +6.1% |
> | P5 | $68,100,000 | -8.6% |
> | P6 | $64,500,000 | -5.3% |
>
> **Key Insights**
> - Performance peaked in **P4** at $74.5M before declining for two consecutive periods.
> - The downward trend (-8.6% → -5.3%) suggests softening performance — worth investigating the underlying drivers.
>
> *Would you like me to overlay a forecast line or break this down by sub-category?*
### Example 3: Proportional Share (Pie Chart)
**User request:** *"What's the share breakdown by category for the current period?"*
**Expected behavior:**
> The agent renders a **pie chart** showing proportional share:
~~~
mermaid
pie title Share by Category — Current Period
"Category A" : 54
"Category B" : 31
"Category C" : 15
~~~
> | Category | Value | Share (%) |
> |----------|-------|-----------|
> | Category A | $285,400,000 | 54% |
> | Category B | $163,900,000 | 31% |
> | Category C | $79,300,000 | 15% |
> | **Total** | **$528,600,000** | **100%** |
>
> **Key Insights**
> - **Category A** is the dominant contributor at 54% of the total.
> - **Category B** contributes nearly a third — any softness here materially impacts the overall number.
>
> *Would you like to see how this split has shifted compared to the prior period?*
### Example 4: Data Not Available
**User request:** *"Chart the margin breakdown for this segment"*
**Expected behavior:**
> I'm sorry, margin data for that segment is not available in my current dataset. I can visualize **revenue** and **volume** breakdowns with charts and tables. Would that be helpful?
## Notes
- This skill activates **automatically** when the agent detects **2+ comparable data points** — the user does not need to explicitly request a chart.
- For **single data points** with no comparison, use a **KPI-style bold text block** instead of a chart, and prompt the user for a comparison dimension.
- **Charts and tables are complementary** — never render a chart without an accompanying data table.
- The **follow-up question** should guide toward a deeper or adjacent analysis, never repeating what was already shown.
- When the rendering environment doesn't support Mermaid, fall back to Python code blocks with clear instructions.
- All figures must be **grounded in source data** — never fabricate or estimate values to populate a chart.
plaintext
Empower your Copilot Studio agent with visual intelligence:
In essence, this skill turns numbers into narratives. Anytime the agent detects data worth seeing — not just reading — it renders the right chart, pairs it with a precise table, and explains what the numbers mean. It activates automatically, so analysts and leadership get visual-first answers without having to ask.
pie title Revenue Composition (Q1–Q3 2026)
"Software (£)" : 20000
"Hardware (£)" : 12000
"Services (£)" : 7500
Top comments (0)