Data visualisation has a complexity problem. The tools that produce the best charts — D3.js, Vega-Lite, custom matplotlib figures — have steep learning curves that most people and teams cannot justify. The tools that are easy to use — Excel charts, Google Sheets — produce output that looks like it was made in 2012 and cannot be customised beyond what the settings panel exposes. The middle ground of tools like Flourish and Datawrapper is genuinely useful for journalists and analysts but requires understanding the data format they expect and does not integrate well into code workflows.
AI chart generation offers a different path: describe your data and the chart you want in plain English, and get back a complete, styled, interactive chart in code — ready to embed in a webpage, export as an image, or customise further.
What you can generate
The major chart types all work well with AI generation. The key is being specific about what the chart needs to communicate, not just what type of chart you want.
Bar charts. Best for comparing values across categories. Works well for: revenue by product line, signups by month, performance metrics by team. Prompt tip: specify whether you want vertical or horizontal bars, whether to sort by value, and whether to show exact values as labels on each bar.
Line charts. Best for showing change over time. Works well for: growth curves, usage trends, stock-style metrics. Prompt tip: specify whether you want multiple series, whether to show the area below the line (area chart), and whether to include data point markers.
Scatter plots. Best for showing correlation between two variables across a population of data points. Works well for: customer LTV vs acquisition cost, performance vs salary, two-metric comparisons at scale. Prompt tip: specify axis labels, whether to size points by a third variable (bubble chart), and whether to include a trend line.
Pie and donut charts. Best for showing proportion of a whole — with the important caveat that these are overused and often the wrong chart type. If you have more than five segments, or if the differences between segments are important, a bar chart is almost always clearer. Prompt tip: limit to five segments, and specify whether to show percentage labels or absolute values.
Funnel charts. Best for conversion flows: site visitors → signups → activated users → paying customers. Prompt tip: specify each stage name and value, and whether to show the drop-off percentage between stages.
Heatmaps. Best for showing patterns across two categorical dimensions — for example, activity by day of week and hour of day. Prompt tip: specify the two dimensions, the metric being measured, and the colour scale.
How to write a chart generation prompt
A chart prompt has four components: chart type, data, visual treatment, and context.
"Create a [chart type] showing [what the data represents]. Data: [paste your data or describe it]. Design: [colour scheme, whether to show gridlines, font style, whether dark or light background]. Context: [title of the chart, what it will be used for — presentation, dashboard, blog post, etc]."
Example strong prompt: "Create a bar chart showing monthly active users for a SaaS product over 12 months. Data: Jan: 1200, Feb: 1450, Mar: 1380, Apr: 1700, May: 2100, Jun: 2400, Jul: 2200, Aug: 2800, Sep: 3100, Oct: 3400, Nov: 3200, Dec: 3900. Design: dark background (#0A0A0B), accent colour #FF3B1F for the bars, clean gridlines, Space Grotesk font, values shown above each bar. Title: 'Monthly Active Users — 2024'. Suitable for embedding in a dashboard."
Interactive charts vs static images
AI chart generators can produce two fundamentally different types of output: static image exports (PNG, SVG) and interactive chart code (Chart.js, D3, Recharts).
Static images are useful for: documents, emails, social media, presentations, anywhere that cannot run JavaScript. They are fixed — once generated, you cannot hover to see exact values, filter by segment, or zoom into a range.
Interactive chart code is useful for: web dashboards, embedded analytics, anywhere that runs in a browser. Interactive charts allow users to hover for exact values, click to filter, and zoom — they communicate significantly more information than their static equivalents because users can explore the data themselves.
GetCode generates Chart.js-based interactive charts that render directly in a browser and can be embedded in any HTML page with a single script tag. No build system required, no framework dependency.
Making charts accessible
A chart that only communicates through colour fails a significant portion of users — approximately 8% of men have some form of colour blindness. Good chart generation should include:
Colour-blind safe palettes. Avoid red/green combinations for comparing two values. Use blue/orange, or differentiate with pattern in addition to colour.
Alt text. Every chart embedded in HTML should have an alt attribute that describes what the chart shows: "Bar chart showing monthly active users growing from 1,200 in January to 3,900 in December 2024."
Data table fallback. For important charts in public-facing content, including the underlying data as a visually hidden table makes the information accessible to screen readers.
Connecting charts to real data
AI-generated charts are most valuable when they are connected to live data rather than static values hardcoded at generation time. The standard pattern: generate the chart structure and visual treatment with AI, then replace the static data array with a fetch call to your API or database.
GetCode's chart output uses Chart.js with a clearly-commented data section that makes this swap straightforward — replace the array of values with your fetch result, and the chart updates automatically.
For teams that want charts that automatically refresh, wrapping the chart in a component with a polling interval or connecting it to a WebSocket data stream adds real-time behaviour without needing to regenerate the chart design.