Skip to main content

Report Visualizations

Transform your data into compelling visual stories with interactive charts, graphs, and data visualizations powered by D3.js and Recharts.

Visualization Overview#

Data visualizations are essential for communicating complex information clearly and memorably. PromptReports provides a powerful suite of visualization tools built on D3.js and Recharts, enabling you to create everything from simple bar charts to sophisticated interactive dashboards.

Visualizations can be added to any section of your report. They automatically adapt to different export formats, ensuring your charts look great whether viewed online, in PDF, or in presentation mode.

20+ Chart Types

From basic bar charts to complex tree maps and Sankey diagrams.

Interactive

Hover tooltips, click actions, zoom, and drill-down capabilities.

Customizable

Full control over colors, styles, labels, and formatting.

Chart Types#

Choose the right visualization type for your data and message. Each chart type has specific strengths for different analytical purposes.

Chart TypeBest ForData Requirements
Bar ChartComparing categories, showing rankingsCategories + values
Line ChartTrends over time, continuous dataTime series data
Pie ChartPart-to-whole relationships, compositionCategories with percentages
Area ChartCumulative totals, stacked comparisonsTime series with categories
Scatter PlotCorrelations, distributionsTwo numeric variables
Heat MapPatterns across two dimensionsMatrix data
Tree MapHierarchical data, nested categoriesHierarchical structure
Sankey DiagramFlows and transitionsSource-target-value data
GaugeProgress, KPIs, targetsSingle value with range
Radar ChartMulti-variable comparisonMultiple metrics per item

Bar & Column Charts

Horizontal or vertical bars for comparing discrete categories. Supports stacked, grouped, and percentage modes.

Line & Area Charts

Show trends and changes over time. Multiple series, smoothing options, and area fills available.

Pie & Donut Charts

Display part-to-whole relationships. Interactive slices with labels and legends.

Trend & Sparklines

Compact inline charts for showing trends within text or tables.

Geographic Maps

Choropleth maps, point maps, and regional data visualization.

Flow Diagrams

Sankey diagrams and flow charts for process and relationship visualization.

Adding Visualizations#

Add visualizations to your report through the editor toolbar or by using the visualization panel. The process is designed to be intuitive while offering powerful configuration options.

1

Open the Visualization Panel

Click the chart icon in the editor toolbar or press Ctrl/Cmd + Shift + V to open the visualization panel.
2

Select Chart Type

Choose the type of visualization that best represents your data. Consider your message and audience when selecting.
3

Input or Connect Data

Enter data manually, paste from a spreadsheet, upload a CSV, or connect to an external data source.
4

Configure Mappings

Map your data columns to chart dimensions (X-axis, Y-axis, categories, values, colors).
5

Customize Appearance

Adjust colors, labels, legends, and other styling options to match your report branding.
6

Insert and Position

Insert the visualization into your report. Drag to position and resize as needed.

Data Sources#

Visualizations can be powered by various data sources, from simple manual entry to live data connections.

Manual Entry

Enter data directly in the chart editor. Ideal for small datasets and custom figures.

File Upload

Upload CSV, Excel, or JSON files. Data is parsed and mapped automatically.

Data Connections

Connect to external databases, APIs, or data warehouses for live data.

AI-Generated Data

Let AI research and compile data for your visualizations based on your topic.

Sample Data Format (CSV)
csv
Category,Q1 2024,Q2 2024,Q3 2024,Q4 2024
Product A,150000,175000,195000,220000
Product B,85000,92000,105000,118000
Product C,45000,52000,48000,55000
Product D,120000,135000,145000,160000
Sample Data Format (JSON)
json
{
  "data": [
    { "category": "Product A", "revenue": 220000, "growth": 15.2 },
    { "category": "Product B", "revenue": 118000, "growth": 12.4 },
    { "category": "Product C", "revenue": 55000, "growth": 8.1 },
    { "category": "Product D", "revenue": 160000, "growth": 10.3 }
  ]
}

Customizing Charts#

Every aspect of your visualizations can be customized to match your report's style and effectively communicate your message.

Customization AreaOptionsPurpose
ColorsCustom palettes, gradients, brand colorsVisual consistency and emphasis
TypographyFont family, size, weight for all textReadability and branding
AxesLabels, tick marks, gridlines, scale typeData interpretation
LegendPosition, orientation, interactive toggleSeries identification
TooltipsContent, formatting, positioningDetailed data on hover
AnnotationsCallouts, reference lines, highlightsDrawing attention to key points
AnimationEntrance effects, transitions, durationEngagement (online only)

Interactive Features#

Online reports support rich interactivity that helps readers explore and understand your data more deeply. These features enhance engagement while maintaining clarity.

Hover Tooltips

Display detailed information when hovering over data points. Fully customizable content and formatting.

Legend Filtering

Click legend items to show/hide data series. Great for comparing specific categories.

Zoom & Pan

Zoom into dense data areas and pan to explore. Essential for large datasets.

Drill Down

Click to explore deeper levels of hierarchical data. Navigate through data dimensions.

Note that interactive features are preserved in web-based reports but converted to static images in PDF exports. Consider providing both formats when interactivity is important.

AI-Generated Charts#

PromptReports can automatically generate appropriate visualizations based on your report content and data. This feature saves time and ensures visualizations effectively support your narrative.

1

Enable Auto-Visualization

Turn on the auto-visualization option in report settings. The AI will analyze your content for visualization opportunities.
2

Review Suggestions

After generation, review the suggested visualizations. The AI explains why each chart type was chosen.
3

Accept or Modify

Accept suggested visualizations, modify them to your preferences, or generate alternatives.
4

Data Verification

Always verify AI-generated data for accuracy. The AI may estimate or synthesize data based on the content.

Best Practices#

Follow these guidelines to create effective, professional visualizations that enhance your reports:

Choose the Right Chart

Match chart type to your data and message. Don't use 3D effects or complex charts when simple ones work better.

Use Color Purposefully

Use color to highlight key data points. Maintain consistency across charts. Consider colorblind users.

Label Clearly

Include descriptive titles, axis labels, and units. Make sure the chart can stand alone.

Tell a Story

Visualizations should support your narrative. Add annotations to highlight key insights.