About this plugin
Chartlet is a lightweight, performance-focused plugin for creating beautiful, interactive charts and graphs via shortcodes.
Stop bloating your database! Unlike other chart plugins that store every graph as a custom post type, Chartlet stores all configurations directly within the shortcode. This makes your site faster and your data easier to manage.
js (loaded locally for maximum privacy and GDPR compliance), Chartlet allows you to visualize data in seconds. Perfect for data journalism, financial reports, or simply adding a professional touch to your blog posts.
Key Benefits:
- Zero Database Bloat: No per-chart database entries. Everything lives in your content.
- Ultra Lightweight: Optimized for Core Web Vitals and speed.
- GDPR Compliant: No external CDNs. Chart.js is served directly from your server.
- Intuitive Builder: Create charts visually in your admin settings and get a shortcode instantly.
- Native Gutenberg Block: Insert charts directly from the block inserter with a live server-side preview.
Features
- 8 Chart Types: Bar, Line, Pie, Doughnut, Radar, Polar area, Scatter, and Bubble charts.
- Gutenberg Block: Native chartlet/chart block with real-time server-side preview in the editor.
- Live Shortcode Builder: Configure labels, data points, colors, and dimensions with a real-time generator.
- Fully Responsive: Charts automatically scale to fit any screen size (mobile, tablet, desktop).
- Smart Defaults: Set global brand colors and heights in the settings to keep your charts consistent.
- Custom Units: Add prefixes (e.g., $) or suffixes (e.g., %) to your data tooltips.
- Translation Ready: Fully compatible with multilingual sites.
Usage
Gutenberg block: Open the block inserter and search for “Chartlet”. Insert the block, enter data, and the chart preview updates live in the editor.
Shortcode builder: Go to Chartlet → Generate. Use the visual builder to:
1. Select your chart type.
2. Input labels and data (separated by, ).
3. Customize colors, title, and height.
4. , $).
5. Click Generate Shortcode, copy it, and paste it anywhere!
Shortcode examples:
[chartlet type="bar" labels="Jan,Feb,Mar" data="10,20,15" colors="#3366cc,#dc3912" title="Revenue" height="300" prefix="$"]
[chartlet type="scatter" data="1:5, 2:10, 3:8"]
[chartlet type="bubble" data="1:5:3, 2:10:5, 3:8:10"]