30 Claude Prompts That Build Charts

You are a growth analytics engineer who builds funnel visualizations. <context> I need a conversion funnel chart showing drop-off across stages, built as one self-contained HTML file using HTML, CSS, and minimal JS (or Chart.js), previewable instantly as an artifact. </context> <inputs> - The funnel: [E.G. VISIT to SIGNUP to TRIAL to PAID] - Stages and counts: [STAGE: COUNT; IN ORDER] - What a conversion means: [E.G. PAID CUSTOMER] - Title and the biggest concern: [TITLE AND THE STEP YOU WORRY ABOUT] </inputs> <task> Build a funnel chart with each stage as a proportionally sized band, showing the stage name, its count, the step-to-step conversion rate, and the cumulative conversion from the top. Highlight the stage with the largest drop-off in a warning color and add a caption naming the biggest leak and its rate. </task> <constraints> - One self-contained HTML file; CDN-only dependencies if any. - Band widths proportional to counts; step and overall conversion rates computed correctly. - Biggest-drop stage clearly flagged with a label, not color alone; responsive and accessible. </constraints> <format> Return the full HTML as an artifact, then suggest one experiment to fix the worst drop-off stage. </format>

You are a data-visualization engineer who builds flow diagrams. <context> I need a Sankey-style flow chart showing how a quantity splits and moves between stages, built as one self-contained HTML file using SVG (and minimal JS), previewable instantly as an artifact. </context> <inputs> - What flows: [E.G. WEBSITE TRAFFIC THROUGH PAGES, BUDGET ACROSS DEPARTMENTS] - Nodes (stages): [LIST OF NODE NAMES BY LEVEL] - Flows between nodes and their values: [FROM to TO: VALUE; REPEAT] - Value unit: [E.G. USERS, $] - Title and the path I care about: [TITLE AND KEY FLOW] </inputs> <task> Build a Sankey-style diagram with nodes drawn as labeled bars and flows as proportional ribbons whose width encodes value, with hover or labels showing each flow's value, and the key path emphasized in the accent color. Add a caption naming the largest flow and where the most volume is lost or diverted. </task> <constraints> - One self-contained HTML file; SVG built directly, CDN deps only if needed. - Ribbon widths proportional to values; flows into a node sum to its inflow. - Labels legible, key path emphasized; responsive and accessible. </constraints> <format> Return the full HTML as an artifact, then explain how to read the diagram and where the biggest leakage occurs. </format>

You are a project visualization designer who builds timeline charts. <context> I need a horizontal timeline chart of milestones or phases, built as one self-contained HTML file using SVG or CSS (and minimal JS), previewable instantly as an artifact. </context> <inputs> - The timeline subject: [E.G. PRODUCT ROADMAP, EVENT PLAN] - Date range: [START AND END] - Milestones or phases with dates: [NAME: START: END (OR DATE): STATUS; REPEAT] - Status options: [E.G. DONE, IN PROGRESS, PLANNED] - Title and accent colors: [TITLE AND COLOR PER STATUS] </inputs> <task> Build a horizontal timeline with a dated axis, each milestone or phase as a positioned marker or bar colored by status, a today marker, a legend for statuses, and tooltips or labels with names and dates. Group or label by track if there are parallel workstreams. Add a caption noting what is overdue or next up. </task> <constraints> - One self-contained HTML file; CDN deps only if needed. - Positions accurate to the date scale; status colors consistent with a legend. - Today marker present; responsive and accessible; readable labels. </constraints> <format> Return the full HTML as an artifact, then explain how to switch this between a roadmap and a Gantt-style phase view. </format>

You are a project planning designer who builds Gantt schedule charts. <context> I need a Gantt-style chart showing tasks, durations, and dependencies, built as one self-contained HTML file using SVG or CSS (and minimal JS), previewable instantly as an artifact. </context> <inputs> - Project name and date range: [NAME, START, END] - Tasks with start, end, and owner: [TASK: START: END: OWNER; REPEAT] - Dependencies (optional): [TASK DEPENDS ON TASK; REPEAT] - Percent complete per task (optional): [TASK: PERCENT] - Title and accent color: [TITLE AND COLOR] </inputs> <task> Build a Gantt chart with a dated header, one row per task, horizontal bars positioned and sized by their dates, a fill showing percent complete, owner labels, a today line, and dependency arrows if provided. Add a caption flagging the critical path or any task at risk of slipping. </task> <constraints> - One self-contained HTML file; CDN deps only if needed. - Bar positions and widths accurate to the date scale; percent-complete fill correct. - Today line present; dependency arrows readable; responsive and accessible. </constraints> <format> Return the full HTML as an artifact, then explain how to mark the critical path and add a weekend or holiday shading band. </format>

You are a data-visualization engineer who builds cumulative growth charts. <context> I need a stacked or cumulative area chart showing growth over time, built as one self-contained HTML file using Chart.js from a CDN, previewable instantly as an artifact. </context> <inputs> - What is growing: [E.G. CUMULATIVE USERS, REVENUE RUN-RATE] - Time labels (x-axis): [LIST] - Series and values (cumulative or to be cumulated): [SERIES: VALUES; STATE WHICH] - Value unit: [E.G. USERS, $] - Title and the milestone to mark: [TITLE AND KEY MOMENT] </inputs> <task> Build a filled area chart (stacked if multiple series) showing the cumulative total over time, with a legend, soft gradient fills, tooltips showing each series plus the running total at a date, an annotation on the milestone date, and a caption stating the total reached and the growth rate. Cumulate the values yourself if raw periodic numbers are given. </task> <constraints> - One self-contained HTML file; Chart.js from a CDN only. - Cumulative math correct; stacking order consistent; y-axis starts at zero. - Colorblind-safe fills with enough contrast; responsive and accessible. </constraints> <format> Return the full HTML as an artifact, then explain when a cumulative view misleads versus a per-period bar chart. </format>

You are a data analyst and visualization engineer. <context> I will paste raw CSV and I want you to pick the right chart and build it as one self-contained HTML file using Chart.js from a CDN, previewable instantly as an artifact. </context> <inputs> - My CSV data: [PASTE CSV WITH HEADER ROW] - What I want to understand: [THE QUESTION] - Any column to focus on or ignore: [DESCRIBE OR NONE] - Title and audience: [TITLE AND WHO WILL READ IT] </inputs> <task> Parse the CSV, infer column types, choose the chart type that best answers my question, and build it with a clear title, labeled axes, formatted tooltips, and a caption stating the single most important finding. State which columns you mapped to which axis and why you chose this chart type. Flag any data quality issues you noticed. </task> <constraints> - One self-contained HTML file; Chart.js from a CDN only. - Do not invent data; if a value is missing or malformed, exclude it and note it. - Honest axes and accurate aggregation; accessible and responsive. </constraints> <format> Return the full HTML as an artifact, then explain your chart-type choice, the column mapping, and any data caveats. </format>

You are a data-cleaning and visualization specialist. <context> My data is messy (inconsistent formats, blanks, duplicates). I need you to clean it and chart it as one self-contained HTML file using Chart.js from a CDN, previewable instantly as an artifact. </context> <inputs> - The messy data: [PASTE ROWS OR CSV] - Known problems: [E.G. MIXED DATE FORMATS, CURRENCY SYMBOLS, BLANKS] - What I want to see: [THE CHART GOAL] - How to handle missing values: [DROP / TREAT AS ZERO / INTERPOLATE] - Title: [CHART TITLE] </inputs> <task> Normalize formats, strip symbols, parse dates, dedupe rows, and handle missing values per my instruction, then build the requested chart with a clear title, labeled axes, tooltips, and a caption with the key finding. List exactly what you cleaned and any rows you dropped, so the result is auditable. </task> <constraints> - One self-contained HTML file; Chart.js from a CDN only. - Show the cleaning decisions transparently; never silently fabricate values. - Accurate parsing and aggregation; accessible and responsive. </constraints> <format> Return the full HTML as an artifact, then list the cleaning steps applied and the rows excluded with reasons. </format>

You are a data analyst who pivots and aggregates raw records into charts. <context> I have row-level records and need them grouped and aggregated into a chart, built as one self-contained HTML file using Chart.js from a CDN, previewable instantly as an artifact. </context> <inputs> - The raw records: [PASTE ROWS OR CSV] - Group by: [COLUMN(S) TO GROUP ON] - Aggregate: [SUM / AVG / COUNT / MAX OF WHICH COLUMN] - Optional secondary split: [SECOND COLUMN OR NONE] - Chart type preference: [BAR / LINE / STACKED / AUTO] - Title and takeaway: [TITLE AND WHAT TO HIGHLIGHT] </inputs> <task> Group the records by the given column(s), apply the requested aggregation, and build the chart, sorting and labeling sensibly. Show the resulting aggregated table briefly in a caption or note so the math is checkable, and add a one-line key finding. If a secondary split is given, render it as grouped or stacked series. </task> <constraints> - One self-contained HTML file; Chart.js from a CDN only. - Aggregation math must be correct and reproducible; do not drop groups silently. - Honest axes; accessible and responsive. </constraints> <format> Return the full HTML as an artifact, then show the aggregated values you computed so I can verify them. </format>

You are a data storyteller who builds annotated charts that make a point. <context> I have data and a conclusion I want to argue. Build an annotated chart as one self-contained HTML file using Chart.js from a CDN, previewable instantly as an artifact. </context> <inputs> - The data: [PASTE VALUES OR CSV] - The point I want to make: [THE ARGUMENT] - Key events to annotate: [DATE OR POINT: WHAT HAPPENED; REPEAT] - Chart type: [LINE / BAR / AUTO] - Title and audience: [TITLE AND WHO] </inputs> <task> Build the chart and layer on annotations: vertical event markers with short labels, a highlighted region or peak, a target or benchmark line if relevant, and a bold takeaway caption that states the argument the data supports. Keep annotations legible and never let them obscure the data. Make the conclusion unmissable while staying honest to the numbers. </task> <constraints> - One self-contained HTML file; Chart.js from a CDN only (annotation via plugin or drawn layer). - Annotations accurate to the data; no cherry-picked axis that distorts the story. - Legible labels, clear hierarchy; accessible and responsive. </constraints> <format> Return the full HTML as an artifact, then explain which annotation does the most work and whether the data truly supports the claim. </format>

You are a data-visualization designer who fixes confusing charts. <context> I have a chart that is hard to read. Rebuild it cleanly as one self-contained HTML file using Chart.js from a CDN, previewable instantly as an artifact. </context> <inputs> - Describe or paste the current chart and its data: [DESCRIBE OR PASTE VALUES] - What is wrong with it: [E.G. TOO MANY COLORS, CLUTTERED, MISLEADING AXIS] - The one message it should convey: [THE TAKEAWAY] - Brand or accent color: [HEX OR DESCRIBE] </inputs> <task> Rebuild the chart following clear data-viz principles: pick the right chart type for the message, remove chartjunk, fix the axis, apply a restrained palette, add direct labels over a busy legend where possible, and surface the takeaway in a caption. List the specific problems you fixed and why each change improves readability. </task> <constraints> - One self-contained HTML file; Chart.js from a CDN only. - Honest axis, minimal colors, high data-ink ratio; accessible and responsive. - Preserve the underlying numbers exactly; improve only the presentation. </constraints> <format> Return the full HTML as an artifact, then give a before-and-after list of the readability problems you fixed. </format>

You are a data-visualization engineer who builds calendar heatmaps. <context> I need a GitHub-style calendar heatmap showing a daily value across weeks, built as one self-contained HTML file using SVG or CSS grid (and minimal JS), previewable instantly as an artifact. </context> <inputs> - What the daily value measures: [E.G. SALES, ACTIVE USERS, WORKOUTS] - Date range: [START AND END] - Daily values: [DATE: VALUE; REPEAT, OR DESCRIBE PATTERN] - Color scale low-to-high: [DESCRIBE OR HEX RANGE] - Title and what to spot: [TITLE AND WHAT MATTERS] </inputs> <task> Build a calendar heatmap with weeks as columns and weekdays as rows, each day colored by its value on a sequential scale, a legend showing the scale, day-of-week and month labels, and tooltips with the date and value. Add a caption noting the busiest period and any weekly pattern (e.g. weekend dips). Fill missing days as zero or blank per a sensible default. </task> <constraints> - One self-contained HTML file; CDN deps only if needed. - Sequential, colorblind-friendly scale; legend present; accurate date placement. - Tooltips accessible; responsive layout. </constraints> <format> Return the full HTML as an artifact, then explain the color-scale choice and how to switch it to a diverging scale. </format>

You are a data-visualization engineer who builds matrix heatmaps. <context> I need a matrix heatmap showing values across two categorical dimensions, built as one self-contained HTML file using SVG or CSS grid (and minimal JS), previewable instantly as an artifact. </context> <inputs> - What the cells measure: [E.G. SALES BY REGION AND MONTH] - Row categories: [LIST] - Column categories: [LIST] - Cell values: [ROW x COLUMN: VALUE GRID, OR PASTE TABLE] - Color scale: [SEQUENTIAL / DIVERGING, WITH MIDPOINT IF DIVERGING] - Title and what to find: [TITLE AND GOAL] </inputs> <task> Build a heatmap grid with labeled rows and columns, each cell colored by value on the chosen scale, the value printed in the cell with readable contrast, a color legend, and tooltips. Add a caption pointing to the hottest and coldest cells and any row or column that stands out. Use a diverging scale around the midpoint if specified. </task> <constraints> - One self-contained HTML file; CDN deps only if needed. - Text contrast adapts to cell darkness; scale and legend accurate. - Colorblind-safe palette; responsive and accessible. </constraints> <format> Return the full HTML as an artifact, then explain when a diverging scale beats a sequential one for this data. </format>

You are a data-visualization engineer who builds simple data maps. <context> I need a choropleth-style map shading regions by value, built as one self-contained HTML file using inline SVG region paths (and minimal JS), previewable instantly as an artifact. </context> <inputs> - The map scope: [E.G. US STATES, EUROPE COUNTRIES, OR A LIST OF REGIONS] - Region values: [REGION: VALUE; REPEAT] - What the value measures: [E.G. REVENUE, USERS] - Color scale low-to-high: [DESCRIBE OR HEX RANGE] - Title and what to highlight: [TITLE AND FOCUS] </inputs> <task> Build a map where each region is an SVG shape shaded by its value on a sequential scale, with a color legend, region tooltips showing name and value, and labels on the top regions. If full geographic paths are impractical, use a clean tile-grid map (one labeled square per region) instead and say so. Add a caption naming the highest and lowest regions. </task> <constraints> - One self-contained HTML file; CDN deps only if needed. - Sequential, colorblind-friendly scale; legend present; accurate value mapping. - Tooltips and labels accessible; responsive. </constraints> <format> Return the full HTML as an artifact, then explain whether you used real paths or a tile-grid map and the tradeoff. </format>

You are a financial data-visualization engineer who builds waterfall charts. <context> I need a waterfall (bridge) chart showing how a starting value reaches an ending value through increments and decrements, built as one self-contained HTML file using Chart.js from a CDN, previewable instantly as an artifact. </context> <inputs> - What it explains: [E.G. HOW REVENUE BECOMES NET PROFIT, OPENING TO CLOSING HEADCOUNT] - Starting value: [LABEL AND NUMBER] - Steps in order with signed values: [STEP: +/- VALUE; REPEAT] - Ending label: [E.G. NET PROFIT] - Value unit and title: [UNIT AND TITLE] </inputs> <task> Build a waterfall chart with a starting total bar, floating step bars colored green for increases and red for decreases, connector lines between steps, a final total bar, value labels on each step, and a caption naming the biggest positive and negative driver. The math must reconcile from start to end exactly. </task> <constraints> - One self-contained HTML file; Chart.js from a CDN only (floating-bar technique). - Steps reconcile precisely to the ending total; increases and decreases colored consistently. - Axis honest; accessible labels and connectors; responsive. </constraints> <format> Return the full HTML as an artifact, then explain the biggest swing factor and how to add subtotals to the bridge. </format>

You are a data-visualization engineer who builds treemap charts. <context> I need a treemap showing how a total breaks down across nested categories by area, built as one self-contained HTML file using SVG (and minimal JS or a CDN plugin), previewable instantly as an artifact. </context> <inputs> - What the total represents: [E.G. BUDGET BY DEPARTMENT AND TEAM] - Categories and values (with optional parent grouping): [PARENT > CHILD: VALUE; REPEAT] - Value unit: [E.G. $, USERS] - Color meaning: [BY GROUP / BY VALUE] - Title and what to spot: [TITLE AND FOCUS] </inputs> <task> Build a treemap where each category is a rectangle sized by its value and colored by group or value, with labels showing the name and value where the box is large enough, a legend, and tooltips for small boxes. Group children under their parent visually. Add a caption naming the largest block and the share of the top two or three. </task> <constraints> - One self-contained HTML file; CDN plugin allowed if needed. - Rectangle areas proportional to values; labels only where they fit, tooltips elsewhere. - Colorblind-safe palette; accessible and responsive. </constraints> <format> Return the full HTML as an artifact, then say when a treemap beats a bar chart for showing part-to-whole with many categories. </format>