Select the Right Chart and Graph Types for Your Data Visualization Dashboard

Get expert chart type recommendations for your data with color, layout, interactivity, and accessibility specifications.

๐Ÿ“ The Prompt

Act as a data visualization expert. I need to design a dashboard for [APPLICATION_NAME] that serves [USER_ROLE] in the [INDUSTRY] industry. The dashboard's primary goal is to help users [DASHBOARD_GOAL, e.g., monitor KPIs, identify trends, compare performance]. Here are the data stories I need to visualize: - Dataset 1: [DESCRIBE_DATA_1, e.g., 'monthly revenue over 24 months across 5 product lines'] - Dataset 2: [DESCRIBE_DATA_2, e.g., 'customer satisfaction scores distributed across 4 categories'] - Dataset 3: [DESCRIBE_DATA_3, e.g., 'real-time server uptime percentage for 12 services'] - Dataset 4: [DESCRIBE_DATA_4, e.g., 'budget allocation across 8 departments vs. actual spending'] - Dataset 5: [DESCRIBE_DATA_5, e.g., 'correlation between marketing spend and lead generation'] For each dataset, provide: 1. **Recommended Chart Type**: Name the primary chart type and one alternative. Explain why this chart type best serves the data relationship (comparison, composition, distribution, relationship, or trend over time). 2. **Why Not Other Charts**: Identify one commonly misused chart type for this data pattern and explain why it would mislead or confuse users. 3. **Design Specifications**: - Color palette strategy (sequential, diverging, or categorical) with specific hex recommendations that are colorblind-safe - Axis configuration (labels, scale type, gridlines, truncation rules) - Legend placement and format - Data label strategy (always show, on hover, threshold-based) - Recommended aspect ratio 4. **Interactivity**: Define hover tooltips content, click-through drill-down behavior, cross-filtering relationships with other charts on the dashboard, and zoom/pan needs. 5. **Responsive Behavior**: How should each chart adapt at mobile (375px) โ€” simplify, reflow, or convert to a different format (e.g., sparkline, summary number)? 6. **Dashboard Layout**: Recommend the spatial arrangement of all 5 visualizations on a single dashboard view using a grid system. Define visual hierarchy โ€” which chart gets the most screen real estate and why. 7. **Accessibility**: For each chart, specify alt text patterns, keyboard navigation support, and a data table fallback strategy.

๐Ÿ’ก Tips for Better Results

Always start with the question your user is trying to answer, not the data shape โ€” 'How are we trending?' suggests a line chart while 'Where is the budget going?' suggests a treemap or stacked bar, even if the underlying data structure is similar. Limit your dashboard to 5-7 visualizations maximum; cognitive load research shows comprehension drops sharply beyond that. Use consistent color encoding across all charts โ€” if 'Product A' is blue in one chart, it must be blue everywhere on the dashboard.

๐ŸŽฏ Use Cases

Data analysts, product managers, and dashboard designers use this when planning which visualization types to use for a new analytics dashboard or when redesigning an existing one for clarity and impact.

๐Ÿ”— Related Prompts

๐ŸŽจ Design intermediate

Design an Engaging Onboarding Screen Sequence for Mobile Apps

Design a complete mobile app onboarding sequence with screen copy, personalization flow, and success metrics.

๐ŸŽจ Design advanced

Create a Micro-Interaction Specification Document for UI Components

Specify micro-interactions for UI components with exact animation values, haptic feedback, accessibility, and implementation notes.

๐ŸŽจ Design intermediate

UI/UX Design Review Checklist

Get a comprehensive UI/UX review covering hierarchy, accessibility, and responsiveness.

๐ŸŽจ Design intermediate

Generate a Custom Color Palette for Any Brand or Project

Generate a complete, accessible color palette with HEX values, usage guidelines, and dark mode variants for any brand or project.

๐ŸŽจ Design intermediate

Find the Perfect Typography Pairing for Your Design Project

Get expert typography pairing recommendations with type scales, spacing guidelines, and CSS fallback stacks for any design project.

๐ŸŽจ Design advanced

Build Comprehensive Design System Documentation

Create complete design system documentation with tokens, component specs, accessibility standards, and contribution guidelines.