Chart Library & Design System

Chart Library & Design System
Guidelines and templates for creating consistent and effective data visualizations.
KPI Explorer & Chart Advisor
Select a dashboard and KPI to see its details and get chart recommendations.
Start by selecting a dashboard.
Font Specifications for Charts (Using Nunito Sans)
Our application uses Nunito Sans as the primary font for all UI elements, including charts. This playground demonstrates how different weights and relative size scales of Nunito Sans affect the appearance of chart text.

Font Preview (Nunito Sans):

Chart Title Example

Axis Label Example

Tooltip Text Example

Legend Text Example

(Current Settings: Weight SemiBold (600), Size Scale: Default)

All chart text defaults to Nunito Sans. Adjust weight and relative size to ensure readability and visual hierarchy.

Chart Color Schemes

Primary Accent Gradient

Used for primary call-to-actions, progress bars, and dominant chart elements.

Categorical Palette (Example)

Deep Blue
#1E2D71
Ocean Green
#2AD9A4
Teal Accent
#69E4BF
Light Purple
#A076F9
Orange Accent
#FF8C00

Use for series in multi-line/bar charts or segments in pie charts. Ensure good contrast.

Data Story Insights UI Templates
Examples of how to present data visualizations with accompanying AI-generated insights.
KPI Trend Analysis
Line Chart Area

What happened?

Sales increased by 20% quarter-over-quarter.

Why did it happen?

Primarily driven by the new Q2 marketing campaign and improved user onboarding flow.

What's going to happen?

Expect a 10-15% further increase next quarter if current momentum holds and seasonal factors are positive.

What should I do?

Double down on successful marketing channels. Monitor onboarding conversion for any drop-offs.

Template 1

Category Breakdown
Bar Chart Area

What happened?

Product A accounts for 60% of total revenue, Product B for 25%, Product C for 15%.

Why did it happen?

Product A is a mature offering with a large customer base. Product B is newer but gaining traction.

What's going to happen?

Dependency on Product A poses a risk if market shifts. Product B shows strong growth potential.

What should I do?

Invest in marketing for Product B to accelerate growth. Explore diversification strategies to reduce reliance on Product A.

Template 2

User Engagement Score
Gauge/Single Metric Area

What happened?

User engagement score is 75/100, up 5 points from last month.

Why did it happen?

Recent feature releases (interactive tutorials, gamification) likely contributed to the increase.

What's going to happen?

Sustained engagement is likely if new content and features continue to be relevant.

What should I do?

Focus on onboarding for new users to boost initial engagement. Gather feedback on most-used features to guide future development.

Template 3

Chart Layout Templates
Select a layout template below to see a preview. Use these as inspiration for your dashboards.

Single Chart Layout (1x1)

Title 12%
Subtitle 8%
Visual Graphic
75 %
  • • Visuals65%
  • • Axes5%
  • • Labels2%
  • • Captions2%
  • • Legend1%
Source Line 5%