SupportHost

Ivan Messina

This plugin creates a shortcode you can use to embed charts anywhere inside WordPress. Just add the shortcode, add some options and you are done. You can see it in use on <a href="https://supporthost.com/fast-website/" rel="nofollow ugc">SupportHost website</a>.
It loads only 1 javascript (chart.js) and only loads it on the page where you actually use the shortcode. It’s so lightweight it won’t impact the performances of your website at all.
Charts are created with <a href="https://www.chartjs.org/" rel="nofollow ugc">chart.js</a>, so you can hover them and read the data.
This <a href="https://wordpress.org/plugins/simple-charts/" rel="ugc">simple charts</a> plugin can be a good alternative for plugins like: 
1. <a href="https://it.wordpress.org/plugins/ninja-charts/" rel="nofollow ugc">ninja charts</a> 
2. <a href="https://it.wordpress.org/plugins/easy-chart-builder/" rel="nofollow ugc">easy chart builder</a> 
3. <a href="https://it.wordpress.org/plugins/googlegraph/" rel="nofollow ugc">Google graph</a>
<h3>Usage</h3>
After the plugin is active, you can just add the shortcode to your pages or posts (or anywhere you can add a shortcode): 
[simple_chart type=”bar” name=”mychart” labels=”jan, feb, mar, apr” data=”2,9,3,7″ label=”First series” color=”#00ffff” border=”#000fff” data_1=”7,2,8,1″ label_1=”Second series” color_1=”#000fff” border_1=”#0ff00f”]
Shorcode parameters: 
* type: you can decide the type of chart you want ot create. Optional, defaults to line. More on charts types below. 
* name: Optional, must be unique per page. 
* options: json of chart options as per <a href="https://www.chartjs.org/docs/latest/configuration/#options" rel="nofollow ugc">chart.js docs</a>. Make sure it’s all in one line. 
* labels: a list of comma separed labels. 
* data: a list of comma separed numbers. You can create data_1 for the second serie, data_2 for the third and so on. Make sure you start from 1, otherwise it won’t work. 
* label: The label name for the serie. You can create label_1 for the second serie, label_2 for the third and so on. Optional, if left blank you will see “label_#” 
* color: The color user for the serie. If empty will default to the chart.js pink. It is recommended to give each series its own color. 
* border: The border color. If empty defaults to the color option.
This is the minimum you can add in the shortcode to make it work: 
[simple_chart labels=”Jan, Apr, Mar” data=”2,9,3″ ]
Examples shortcodes: 
[simple_chart type=”bar” labels=”2 s, 3 s, 4 s, 5 s, 6 s, 7 s” data=”9.6, 13, 17.1, 22.2, 27.4, 32.3″ label=”Bounce rate %” color=”#e8e1fc” data_1=”3,4,5,1,2,7″ label_1=”Label 1″ color_1=”#ff00ff” options=”indexAxis: ‘y’,plugins: {title: {display: true,text: ‘Bounce rate per load time’, position:’bottom’}}”] 
[simple_chart type=”bar” labels=”2 s, 3 s, 4 s, 5 s, 6 s, 7 s” data=”9.6, 13, 17.1, 22.2, 27.4, 32.3″ label=”Bounce rate %” color=”#e8e1fc” options=”plugins: {title: {display: true,text: ‘Bounce rate per load time’, position:’bottom’}}”]
<h3>6 Chart types</h3>
Supported charts types are:
<ol>
<li>Line</li>
<li>Bar Chart</li>
<li>Doughnut</li>
<li>Pie</li>
<li>Radar</li>
<li>polarArea</li>
</ol>
<h3>Extremely simple</h3>
Just insert the shortcode, add the data and the chart will be shown.
<h3>Embed anywhere</h3>
If you can use a shortcode in that content you can add the chart.

Simple Charts

With Simple Charts, you can easily embed charts in WordPress.
I've been waiting for such a plugin for a long time.
Really thank you for this amazing plugin.


Finally the plugin I need

We needed a simple plugin to create charts, that would not slow down WordPress, and that would allow to create charts easily and fast.

We came up with thi ultralight plugin (is only a shortcode) that only adds a javascript file if you use the shortcode.

Add the shortcode, add some data points and hit publish, it's that easy.

A simple lightweight plugin


this plugin is a good idea but the example shortcode did not work on my local site on either a page in the shortcode field or on a template inside do_shortcode().


this does not work

Easily add charts to your wordpress website, probably the lightest plugin out there.

bdthemes

Selim Rana

Shamim Hasan

🚀 Elevate Your WordPress Content with Advanced Data Visualization! 🚀
Chart Blocks for Gutenberg transforms how you present data on your WordPress website. In today’s data-driven world, presenting information clearly and beautifully is essential for engaging your audience. Our powerful yet user-friendly plugin integrates seamlessly with the WordPress block editor, allowing anyone to create stunning, interactive charts and graphs without coding knowledge.
✨ Why Choose Chart Blocks for Gutenberg? ✨
In the competitive online landscape, standing out is crucial. Static text and basic images no longer capture user attention effectively. Chart Blocks for Gutenberg empowers you to transform complex data into visually compelling stories that engage visitors, increase time on page, and boost conversions. Whether you’re a blogger sharing statistics, a business showcasing growth, or an educator explaining concepts, our plugin provides the perfect tools to visualize your data professionally.
🔍 The Power of Data Visualization for WordPress 🔍
Research shows that humans process visual information 60,000 times faster than text. By incorporating beautiful, interactive charts into your content, you can:
<ul>
<li>Improve comprehension of complex information</li>
<li>Increase reader engagement by up to 80%</li>
<li>Boost memory retention of key facts and figures</li>
<li>Enhance the professionalism of your website</li>
<li>Simplify decision-making for your audience</li>
</ul>
Our plugin bridges the gap between powerful data visualization and WordPress simplicity, making professional charts accessible to everyone.
📊 Comprehensive Chart Types for Every Need 📊
Whatever your data visualization requirements, we’ve got you covered with our extensive library of chart types:
<ul>
<li>Bar Charts: Perfect for comparing values across different categories</li>
<li>Line Charts: Ideal for showing trends and changes over time</li>
<li>Pie & Donut Charts: Excellent for displaying proportional data and percentages</li>
<li>Area Charts: Great for showing cumulative totals across categories</li>
<li>Radar Charts: Best for comparing multiple variables at once</li>
<li>Polar Area Charts: Useful for highlighting variations in a cyclical dataset</li>
<li>Scatter Plots: Ideal for showing relationships between variables</li>
<li>Bubble Charts: Perfect for representing three dimensions of data</li>
<li>Horizontal Bar Charts: Alternative layout for comparing categories</li>
<li>Stacked Charts: Show composition changes over time or categories</li>
</ul>
Each chart type comes with dozens of customization options to ensure your visualizations perfectly match your website’s style and effectively communicate your message.
🎨 Unlimited Customization Possibilities 🎨
Unlike other chart plugins that lock advanced features behind paywalls, Chart Blocks for Gutenberg gives you complete creative control:
<ul>
<li>Rich Color Palettes: Choose from predefined professional color schemes or create your own custom palette to match your brand</li>
<li>Comprehensive Typography Controls: Customize titles, labels, legends, and tooltips with different fonts, sizes, and styles</li>
<li>Flexible Axis Configuration: Fine-tune your X and Y axes with custom ranges, step sizes, and formatting options</li>
<li>Interactive Legend Options: Position, style, and control interactivity of chart legends</li>
<li>Responsive Behavior Settings: Ensure your charts look perfect on all devices from desktops to smartphones</li>
<li>Animation Controls: Select from various animation types and durations for chart rendering</li>
<li>Advanced Tooltip Customization: Create informative, styled tooltips that appear on hover</li>
<li>Grid and Scale Options: Adjust background grids, ticks, and padding for optimal readability</li>
</ul>
The intuitive block editor interface makes these customizations accessible to users of all technical levels while providing the depth that professionals demand.
📱 Truly Responsive and Mobile-Friendly 📱
In today’s mobile-first world, your data visualizations must perform flawlessly across all devices. Chart Blocks for Gutenberg delivers:
<ul>
<li>Automatically Responsive Charts: Charts dynamically resize to fit any screen size</li>
<li>Touch-Optimized Interactions: Mobile-friendly tooltips and controls</li>
<li>Configurable Mobile Displays: Option to show simplified versions on smaller screens</li>
<li>Fast Loading Times: Optimized code ensures charts load quickly on mobile connections</li>
<li>Accessibility Compliance: Charts work with screen readers and keyboard navigation</li>
</ul>
Your data will look stunning and function perfectly for all visitors, regardless of their device.
📁 Flexible Data Management 📁
We understand that data comes in many formats, which is why our plugin supports multiple data input methods:
<ul>
<li>Simple Table Interface: Enter data directly into an intuitive table within the block editor</li>
<li>CSV Import: Upload CSV files to instantly create charts from existing data</li>
<li>Spreadsheet Copy/Paste: Copy data from Excel, Google Sheets, or other spreadsheet programs</li>
<li>WordPress Database Integration: Connect to your database to display dynamic site data</li>
<li>External API Support: Pull live data from external APIs for real-time charts</li>
<li>Reusable Chart Templates: Save chart configurations for consistent reporting</li>
<li>Data Update Controls: Set automatic refresh intervals for dynamic data sources</li>
</ul>
This flexibility ensures you can work with data in the way that best suits your workflow.
⚡ Performance Optimized ⚡
We’ve built Chart Blocks for Gutenberg with performance as a priority:
<ul>
<li>Lightweight Core: Minimal impact on page load times</li>
<li>Efficient Rendering: Charts render quickly even with large datasets</li>
<li>Lazy Loading Option: Charts can load only when scrolled into view</li>
<li>Caching System: Reduces server load for dynamic data charts</li>
<li>Optimized Assets: CSS and JavaScript files are minified and efficiently loaded</li>
<li>No jQuery Dependency: Modern vanilla JavaScript for better performance</li>
<li>Server-Side Rendering: Option for faster initial page loads</li>
</ul>
Your website’s speed remains lightning-fast even with multiple charts on a single page.
🔒 Privacy and Data Security 🔒
In an era of increasing privacy concerns, our plugin ensures:
<ul>
<li>100% On-Site Processing: All data visualization happens on your server</li>
<li>No External Dependencies: Charts don’t require connections to third-party services</li>
<li>GDPR Compliance: No personal data is collected or shared</li>
<li>Secure Data Handling: Safe processing of sensitive information</li>
<li>Self-Hosted Solution: Complete control over your data and its presentation</li>
</ul>
Your data remains yours alone, with no external services required to create professional visualizations.
🔄 Seamless WordPress Integration 🔄
Chart Blocks for Gutenberg works harmoniously with the WordPress ecosystem:
<ul>
<li>Native Block Editor Experience: Follows WordPress UI/UX patterns for intuitive use</li>
<li>Theme Compatibility: Works perfectly with any WordPress theme</li>
<li>Plugin Friendly: No conflicts with popular WordPress plugins</li>
<li>Multi-Site Compatible: Functions correctly in WordPress network installations</li>
<li>Classic Editor Support: Shortcode implementation for Classic Editor users</li>
<li>Translation Ready: Supports internationalization for global users</li>
<li>Role-Based Access Controls: Restrict chart creation and editing to specific user roles</li>
</ul>
The plugin feels like a natural extension of WordPress rather than a bolted-on addition.
💼 Professional Use Cases 💼
Chart Blocks for Gutenberg serves diverse professional needs:
<ul>
<li>Business Websites: Present financial results, growth metrics, and market analysis</li>
<li>Educational Institutions: Visualize research findings, student demographics, and learning outcomes</li>
<li>News Organizations: Create informative data journalism with embedded charts</li>
<li>Government Agencies: Display budget allocations, program results, and public data</li>
<li>Non-Profits: Illustrate impact metrics, donation allocation, and cause-related statistics</li>
<li>Healthcare Providers: Share health data, treatment outcomes, and research findings</li>
<li>Marketing Professionals: Showcase campaign results, audience demographics, and ROI</li>
<li>Personal Blogs: Enhance content with data-backed visualizations</li>
<li>E-commerce Stores: Display product comparisons, sales trends, and customer feedback</li>
</ul>
Whatever your niche, Chart Blocks for Gutenberg elevates your content with professional data visualization.
📤 Export and Sharing Options 📤
Extend the reach of your charts beyond your website:
<ul>
<li>One-Click Image Export: Download charts as high-quality PNG or SVG images</li>
<li>PDF Export: Generate PDF documents containing your charts</li>
<li>Social Media Optimization: Charts are designed for perfect social sharing</li>
<li>Embed Codes: Generate embed codes to share your charts on other websites</li>
<li>Print-Friendly Versions: Charts automatically optimize for printed media</li>
<li>Data Download: Allow visitors to download the underlying chart data</li>
</ul>
These features make your visualizations versatile assets for presentations, reports, and social media.
🌐 Global Community and Support 🌐
Join a thriving community of Chart Blocks for Gutenberg users:
<ul>
<li>Comprehensive Documentation: Detailed guides for every feature</li>
<li>Video Tutorials: Step-by-step visual instructions</li>
<li>Sample Templates: Pre-built chart configurations for quick starts</li>
<li>Regular Updates: New features and improvements based on user feedback</li>
<li>Dedicated Support: Our team is ready to help solve any issues</li>
<li>User Community: Share tips and tricks with fellow users</li>
<li>Developer Resources: APIs and hooks for custom extensions</li>
</ul>
You’re never alone when creating data visualizations with our plugin.
🚀 Future-Proof Technology 🚀
Chart Blocks for Gutenberg is built on modern technologies for long-term reliability:
<ul>
<li>Built on Chart.js: Industry-standard JavaScript charting library</li>
<li>Block Editor Native: Fully embraces WordPress’s future direction</li>
<li>Regular Updates: Continuously enhanced with new features</li>
<li>Structured Data Support: Charts can include Schema.org markup for better SEO</li>
<li>Web Standards Compliant: Follows current HTML5, CSS3, and ES6+ standards</li>
<li>Optimized for Core Web Vitals: Helps maintain excellent page experience scores</li>
</ul>
Invest in a solution that grows with WordPress and web standards.
✅ Getting Started is Easy ✅
Experience the power of professional data visualization in just a few clicks:
<ol>
<li>Install the plugin from the WordPress repository</li>
<li>Add a new chart block to any post or page</li>
<li>Enter your data or import from a CSV file</li>
<li>Customize the appearance to match your needs</li>
<li>Publish and impress your visitors</li>
</ol>
Transform your WordPress content today with Chart Blocks for Gutenberg!
Key Features:
<ul>
<li>Multiple Chart Types: Choose from bar charts, line charts, pie charts, and more.</li>
<li>Fully Customizable: Customize chart colors, titles, axes, labels, and more.</li>
<li>Responsive Design: Charts automatically adjust to fit any screen size.</li>
<li>Data Inputs: Easily input data manually or upload CSV files for automatic chart generation.</li>
<li>Interactive Charts: Hover effects, tooltips, and more.</li>
<li>Live Data Integration: Integrate external APIs for live data charts (advanced users).</li>
<li>Export Options: Allow users to download charts as images (PNG, SVG).</li>
</ul>

Advanced Charts for Gutenberg Blocks Editor

The Charts block lets you design stylish, customizable WordPress buttons with layout controls, pre-made styles, and integrated icons.

Simple Charts vs Advanced Charts for Gutenberg Blocks Editor