Below is the current version of a prompt I've been using to convert AI responses to charts and save them as .png files. To use it, just copy past the prompt in the code block below and paste it in your preferred AI code generator (I used VS Codium with RooCode Plugin.)
Along with this prompt, you should pass to it the data you want, it could be in any format that AI can turn into tables. The generated code from this prompt should have the data you want in a downloadable chart! You can save it as .png file.
As of now, I got the best results with Gemini 3 Pro, at least with zero-shot results with no further prompting. I tried using GLM 4.6 and the results worked well, but didn't look as good as they did with Gemini 3 Pro.
While it can support any type of data that the AI can understand and structure, giving it already structured data will have a better results. I had good results with Markdown responses from DeepSeek using Search Enabled comparisons for gaming rigs.bold
I hope to refine this prompt further and further so it can create the results I need with zero-shot prompting even with SLMs that contain less than 20B parameters.
The Prompt
You are an expert web developer and data visualization specialist. Your task is to create a single, self-contained HTML file that displays one comprehensive, interactive data visualization slide based on the data I will provide. The slide must be aesthetically advanced, user-customizable, and exportable as a high-quality PNG image.
**The data for the chart is: [PASTE YOUR DATA HERE]**
**Core Requirements:**
1. **Single, Comprehensive Visualization:**
* Analyze the provided data and determine the most effective way to visualize it (e.g., comparative bar charts).
* **Visual Style:** Use **uneven vertical gradients** for the chart elements (bars/lines) to create a dynamic, modern aesthetic (e.g., fading from the base color to a lighter/darker variant).
* The visualization must clearly explain the data's story using titles, subtitles, axis labels, legends, and annotations.
2. **Advanced Aesthetics & Layout:**
* **Layout:** The page should be centered with the **Chart Card on top** and the **Control Panel below it**.
* **Card Design:** The chart must be contained within a "card" or "block" with a customizable shadow effect and rounded corners.
* **Background:** The page background should be neutral, while the card background is customizable.
3. **User Customization (Live Editing):**
* Implement a robust control panel **below the chart** that updates the visualization in real-time.
* **Color Controls:**
* Chart elements (bars/segments) for each dataset.
* Background color of the chart card.
* Grid lines and axes.
* **Text & Typography Controls:**
* Main Text Color (applies to titles, legends, axis labels).
* **Advanced Glow/Outline Effect:** Implement a text shadow/glow that applies to **ALL text** (both HTML titles and internal Chart.js labels).
* *Controls:* Glow Color, Glow Opacity, and **Glow Size**.
* *Critical Requirement:* The **Glow Size** must be **relative to the font size** (a multiplier, e.g., 0.0x to 2.0x), NOT a fixed pixel value. This ensures the glow looks consistent on both large titles and small axis labels.
* **Layout & Sizing Controls:**
* **Chart Width:** Slider to adjust the width of the chart card (e.g., 50% to 100%).
* **Card Roundness:** Slider to adjust border-radius.
* **Shadow Intensity:** Slider to adjust the box-shadow opacity/spread.
* Changes in the control panel must instantly update the chart on the screen.
4. **Robust PNG Export Functionality:**
* Add a clearly labeled "Download as PNG" button.
* **Resolution Options:** Include a dropdown to select the export scale: **1x (Standard), 2x (High Res), and 4x (Ultra Res)**.
* **Export Image Specifications:**
* The exported image must have a **translucent (e.g., rgba(255, 255, 255, 0.95)) white-ish background**, regardless of the user's chosen card background color. This ensures readability on both light and dark website backgrounds.
* The chart itself within the image should retain the "block" style (rounded corners, shadow) for a polished, standalone look.
* The final image should be high-resolution and crisp.
* The exported image should only contain the chart block, not the browser UI or the customization controls.
* **Technical Export Requirements (Critical for Success):**
* Use `html2canvas` with the following configuration to ensure stability and image loading:
* `useCORS: true`
* `allowTaint: true`
* `imageTimeout: 15000`
* **Canvas Cloning Strategy:** In the `onclone` callback of `html2canvas`, you **MUST manually copy the content** of the original Chart.js canvas to the cloned canvas using `ctx.drawImage()`. This is the only way to guarantee the chart bars and custom drawings (like logos) appear in the export.
* **Image Preloading:** Ensure all external images (logos, icons) are fully loaded before the export function runs.
5. **Technical Implementation:**
* **Libraries:** Use open-source libraries that can be run locally. For this task, **Chart.js** for charting and **html2canvas** for PNG export are perfect choices. Include them via a CDN but also add a comment with links to their repositories for local download.
* **Single HTML File:** All HTML, CSS (for the layout and controls), and JavaScript (for charting, customization, and export logic) must be contained within one file.
* **CSS Custom Properties:** Use CSS custom properties (`--main-color: #...;`) to manage the chart's colors. This will make the live customization logic clean and simple.
* **Chart.js Customization:** You may need to "monkey patch" or use specific Chart.js plugins/hooks to correctly apply the *relative* glow effect to the canvas text elements based on their specific font sizes.
* **Clarity:** The code should be well-commented, especially the parts handling the data parsing, color customization, and the export logic, so it's easy to understand and modify.
**Output:**
Generate the complete, ready-to-use HTML file that fulfills all the requirements above. The final product should be an interactive tool that I can use to visualize my data, customize its appearance to my needs, and export a perfect graphic for my articles.
- Image is made with Qwen-Image via Venice.ai.
Posted Using INLEO