feat(chart): add data labels support for charts

[SOUMITRO-SAHA]

feat(charts): Add data label support

Closes: #396

Summary

This PR introduces the functionality to display data labels directly on chart elements (e.g., bars, line points, pie slices). This allows users to see the exact values of data points without needing to hover over them, significantly improving chart readability.

The AI agent can now be prompted to show labels (e.g., "show me sales with data labels"), and the labels will be rendered on the chart and preserved when added to stories.

Changes

• Tool Schema (display-chart.ts): Added an optional show_data_labels: boolean field to the display_chart tool's input schema.
• Chart Builder (chart-builder.tsx):
  • Updated the core buildChart logic to handle the new showDataLabels prop.
  • Implemented conditional label rendering in buildBarChart:
    • Grouped Bar Charts: Use rotated labels (-90deg) to fit within narrow bars.
    • Stacked Bar Charts: Use standard, centered horizontal labels within each segment for clarity.
  • Enabled data labels for line/area charts, positioned above each data point.
• Frontend Components:
  • Updated display-chart.tsx and story-chart-embed.tsx to pass the showDataLabels prop to the chart rendering logic.
  • Modified the "Add to Story" functionality to include the show_data_labels attribute in the generated <chart> tag.
• Story Parsing (story-segments.ts): Updated the story parser to correctly read the show_data_labels attribute from saved stories.

Before

Previously, charts did not display any data labels, even when requested. Values were only visible in tooltips on hover.

After

Charts now clearly display data labels when the show_data_labels option is enabled. The label formatting is tailored to the chart type for optimal readability.

How to test

1. Start a new chat and ask the AI to generate a chart with data labels (e.g., "show sales by month with data labels").
2. Verify that the labels appear correctly.
3. Add the chart to a story and ensure the labels are still visible in the story view.

[cubic-dev-ai]

1 issue found across 5 files

Prompt for AI agents (unresolved issues)

Check if these issues are valid — if so, understand the root cause of each and fix them. If appropriate, use sub-agents to investigate and fix each issue separately.


<file name="apps/shared/src/chart-builder.tsx">

<violation number="1" location="apps/shared/src/chart-builder.tsx:44">
P2: Pie chart rendering ignores the new `showDataLabels` option and always displays labels, causing inconsistent behavior across chart types.</violation>
</file>

---

Since this is your first cubic review, here's how it works:

• cubic automatically reviews your code and comments on bugs and improvements
• Teach cubic by replying to its comments. cubic learns from your replies and gets better over time
• Add one-off context when rerunning by tagging @cubic-dev-ai with guidance or docs links (including llms.txt)
• Ask questions if you need clarification on any suggestion

_{Reply with feedback, questions, or to request a fix. Tag @cubic-dev-ai to re-run a review.}

[cubic-dev-ai]

P2: Pie chart rendering ignores the new showDataLabels option and always displays labels, causing inconsistent behavior across chart types.

Prompt for AI agents

Check if this issue is valid — if so, understand the root cause and fix it. At apps/shared/src/chart-builder.tsx, line 44:

<comment>Pie chart rendering ignores the new `showDataLabels` option and always displays labels, causing inconsistent behavior across chart types.</comment>

<file context>
@@ -29,6 +41,7 @@ export interface BuildChartProps {
 	colorFor?: (key: string, index: number) => string;
 	labelFormatter?: (value: string) => string;
 	showGrid?: boolean;
+	showDataLabels?: boolean;
 	children?: React.ReactNode[];
 	margin?: { top?: number; right?: number; bottom?: number; left?: number };
</file context>

[github-actions]

🚀 Preview Deployment

URL	https://pr-455-5286099.preview.getnao.io
Commit	5286099

⚠️ No LLM API keys configured - you'll see the API key setup flow when trying to chat.

---

_{Preview will be automatically removed when this PR is closed.}

[SOUMITRO-SAHA]

From what I understand, pie charts are designed to always display labels by default, so the showDataLabels option is not required for this chart type. Because of this behaviour, there is no reason to show labels inside the chart.

You may want to review the pie chart rendering logic in the implementation to confirm this behaviour. I have also included a screenshot in the PR description that shows how the labels are currently rendered.

Please let me know if you think the showDataLabels option should also control label visibility for pie charts, and we can discuss adjusting the implementation.