All Plugins
Easy Charts - Professional Custom Charts
Free
Easy Charts is a powerful and intuitive plugin for Bubble.io developers, designed to create dynamic and customizable line charts, bar charts, and pie charts with ease. This plugin offers a wide array of features that streamline data visualization, making it an indispensable tool for any Bubble.io application.
About
[center][h1][b]Most customizable Charts available in the marketplace![/b][/h1][/center] Easy Charts is a powerful and intuitive plugin for Bubble.io developers, designed to create dynamic and customizable line charts, bar charts, and pie charts with ease. This plugin offers a wide array of features that streamline data visualization, making it an indispensable tool for any Bubble.io application. Easy Charts revolutionizes the way Bubble.io developers visualize data by providing a robust and [b]user-friendly solution for creating stunning charts.[/b] With Easy Charts, you can effortlessly integrate line charts, bar charts, and pie charts into your Bubble.io applications, enhancing the way data is presented and interpreted. [b][size=4]🔗[/size][/b][b] Full Demo in an app (with link to editor): [/b][url=https://chart-test-14736.bubbleapps.io/version-test/demov2]https://chart-test-14736.bubbleapps.io/version-test/demov2[/url] Try our plugin with low risk, as subscriptions are pro-rated — [b]subscribing for a few days will only cost a few cents[/b]. [youtube]w67bYkydb0Q[/youtube] 📍 [b]Key Features[/b] [b][u]Versatile Chart Types[/u][/b] [ml][ul][li indent=0 align=left][b]Line Charts[/b]: Perfect for showcasing trends over time, making it easy to track progress and changes.[/li][/ul][/ml] [ml][ul][li indent=0 align=left][b]Bar Charts:[/b] Ideal for comparing data across different categories, offering a clear and straightforward way to highlight differences and similarities.[/li][/ul][/ml] [ml][ul][li indent=0 align=left][b]Pie Charts:[/b] Great for visualizing proportions and distributions, providing a quick snapshot of how various parts contribute to a whole.[/li][/ul][/ml] [b][u]Customizable Design[/u][/b] [b]Styling Options:[/b] Tailor the appearance of your charts with customizable colors, fonts, and labels to match your app's design seamlessly. Interactive Elements: Add tooltips, legends, and hover effects to make your charts more engaging and informative. [b][u]Data Integration[/u][/b] [ml][ul][li indent=0 align=left][b]Dynamic Data Binding:[/b] Connect your charts to live data sources, ensuring your visuals are always up-to-date with the latest information.[/li][/ul][/ml] [ml][ul][li indent=0 align=left][b]Multiple Data Formats: [/b]Support for various data formats, including JSON, CSV, and direct input from Bubble.io databases.[/li][/ul][/ml] [b][u]Advanced Features[/u][/b] [ml][ul][li indent=0 align=left][b]Drill-Down Capability:[/b] Enable users to click on chart elements to reveal more detailed information, offering deeper insights into the data.[/li][/ul][/ml] [ml][ul][li indent=0 align=left][b]Responsive Design:[/b] Ensure your charts look great on any device, from desktops to mobile screens, with automatic resizing and scaling.[/li][/ul][/ml] [ml][ul][li indent=0 align=left][b]Animation Effects: [/b]Enhance the visual appeal of your charts with smooth animation transitions.[/li][/ul][/ml] [b][u]Benefits and Value for Bubble.io Developers[/u][/b] [ml][ul][li indent=0 align=left][b]Streamlined Development:[/b] Easy Charts simplifies the process of integrating professional-quality charts into your Bubble.io applications, saving you time and effort.[/li][/ul][/ml] [ml][ul][li indent=0 align=left][b]Enhanced User Experience:[/b] Improve user engagement and data comprehension with visually appealing and interactive charts.[/li][/ul][/ml] [ml][ul][li indent=0 align=left][b]Real-Time Data Visualization:[/b] Keep your charts in sync with real-time data, providing users with the most current and accurate information.[/li][/ul][/ml] [ml][ul][li indent=0 align=left][b]Flexibility and Control:[/b] Enjoy complete control over the look and functionality of your charts, ensuring they meet your specific requirements.[/li][/ul][/ml] [b][u]Use Cases and Scenarios[/u][/b] [ml][ul][li indent=0 align=left][b]Business Dashboards: [/b]Create comprehensive dashboards to monitor key performance indicators (KPIs) and business metrics, helping stakeholders make data-driven decisions.[/li][/ul][/ml] [ml][ul][li indent=0 align=left][b]Financial Reports:[/b] Visualize financial data such as revenue, expenses, and profit margins to track financial performance and identify trends.[/li][/ul][/ml] [ml][ul][li indent=0 align=left][b]Survey Results: [/b]Display survey results in an easy-to-understand format, allowing users to quickly grasp the insights and feedback gathered.[/li][/ul][/ml] [ml][ul][li indent=0 align=left][b]Sales Tracking:[/b] Monitor sales data over time, compare performance across different regions or products, and identify growth opportunities.[/li][/ul][/ml] Easy Charts is the [b]ultimate solution[/b] for Bubble.io developers seeking to elevate their applications with sophisticated data visualization capabilities. Empower your users with clear, interactive, and impactful charts that transform data into actionable insights. Unlock the full potential of your Bubble.io projects with Easy Charts today. 👨💻 [b]Demo: [/b][url=https://chart-test-14736.bubbleapps.io/version-test/demov2]https://chart-test-14736.bubbleapps.io/version-test/demov2[/url] 📄 [b]Documentation: [/b][url=https://docs.google.com/document/d/e/2PACX-1vQ9WhGuNIn6_lG1UDf-gOKwfDPxaaqPbZ_xNd2IyyWKhtlSRK9rd6_6gE-2Ieb-TGR7XrMZzRjTw8ta/pub]https://docs.google.com/document/d/e/2PACX-1vQ9WhGuNIn6_lG1UDf-gOKwfDPxaaqPbZ_xNd2IyyWKhtlSRK9rd6_6gE-2Ieb-TGR7XrMZzRjTw8ta/pub[/url] 📝 [b]Editor: [/b][url=https://bubble.io/page?name=demov2&id=chart-test-14736&test_plugin=1700593159414x471296786993250300_current&tab=Design&type=page]https://bubble.io/page?name=demov2&id=chart-test-14736&test_plugin=1700593159414x471296786993250300_current&tab=Design&type=page[/url]
Setup Instructions
[ml][ol][li indent=0 align=left]Add this plugin to your application.[/li][li indent=0 align=left]Drag and drop ‘PieChart’, ‘LineChart’ or ‘BarChart’ element in your editor.[/li][li indent=0 align=left]Customize the properties in the element you want for your ‘PieChart’, ‘LineChart’ or ‘BarChart’.[/li][/ol][/ml]
Full Documentation
[h2][b]Plugin Details[/b][/h2]
[ml][ul][li indent=0 align=left][b]Data Labels:[/b][b][color=rgb(51, 51, 51)] [/color][/b][color=rgb(51, 51, 51)]Labels data that can contain any sort of values.[/color][/li][li indent=0 align=left][b]Serie A:[/b][b][color=rgb(153, 153, 153)] [/color][/b][color=rgb(51, 51, 51)]Contains a series of objects.[/color][/li][li indent=0 align=left][b]Line color (Optional): [/b]Sets a line color of serie A.[/li][li indent=0 align=left][b]Line Width (Optional):[/b] Sets a line width of serie A. Allows numbers.[/li][li indent=0 align=left][b]Dashed Line: [/b]Sets a line dashed if it is checked. [i]Default false.[/i][/li][li indent=0 align=left][b]Linecap:[/b] Selected between Circle o Square Linecap appearance. [i]Default is circle.[/i][/li][li indent=0 align=left][b]Linecap Color (Optional): [/b]Sets color of linecap.[/li][li indent=0 align=left][b]Linecap width (Optional):[/b] sets linecap width.[/li][li indent=0 align=left][b]Serie B: [/b]Contains a series of objects.[/li][li indent=0 align=left][b]Line color (Optional): [/b]Sets a line color of serie B.[/li][li indent=0 align=left][b]Line Width (Optional):[/b] Sets a line width of serie B. Allows numbers.[/li][li indent=0 align=left][b]Dashed Line: [/b]Sets a line dashed if it is checked. [i]Default false.[/i][/li][li indent=0 align=left][b]Linecap:[/b] Selected between Circle o Square Linecap appearance. [i]Default is circle.[/i][/li][li indent=0 align=left][b]Linecap Color (Optional): [/b]Sets color of linecap.[/li][li indent=0 align=left][b]Linecap width (Optional):[/b] sets linecap width.[/li][li indent=0 align=left][b]Serie C: [/b]Contains a series of objects.[/li][li indent=0 align=left][b]Line color (Optional): [/b]Sets a line color of serie C.[/li][li indent=0 align=left][b]Line Width (Optional): [/b]Sets a line width of serie C. Allows numbers.[/li][li indent=0 align=left][b]Dashed Line: [/b]Sets a line dashed if it is checked. [i]Default false.[/i][/li][li indent=0 align=left][b]Linecap:[/b] Selected between Circle o Square Linecap appearance. [i]Default is circle.[/i][/li][li indent=0 align=left][b]Linecap Color (Optional): [/b]Sets color of linecap.[/li][li indent=0 align=left][b]Linecap width (Optional):[/b] sets linecap width.[/li][li indent=0 align=left][b]Serie D: [/b]Contains a series of objects.[/li][li indent=0 align=left][b]Line color (Optional): [/b]Sets a line color of serie D.[/li][li indent=0 align=left][b]Line Width (Optional):[/b] Sets a line width of serie D. Allows numbers.[/li][li indent=0 align=left][b]Dashed Line: [/b]Sets a line dashed if it is checked. [i]Default false.[/i][/li][li indent=0 align=left][b]Linecap:[/b] Selected between Circle o Square Linecap appearance. [i]Default is circle.[/i][/li][li indent=0 align=left][b]Linecap Color (Optional): [/b]Sets color of linecap.[/li][li indent=0 align=left][b]Linecap width (Optional):[/b] sets linecap width.[/li][li indent=0 align=left][b]Show Point: [/b]If dots should be shown or not. [i]Default is false.[/i][/li][li indent=0 align=left][b]Show Area: [/b]If the line chart should draw an area. [i]Default is false.[/i][/li][li indent=0 align=left][b]Show Line: [/b]If the line should be drawn or not. [i]Default is true.[/i][/li][li indent=0 align=left][b]Show grid: [/b]If the x-axis and y-axis of the grid should be drawn or not.[/li][li indent=0 align=left][b]Show grid background: [/b]If the background color grid should be filled or not. [i]Default is false.[/i][/li][li indent=0 align=left][b]Line Smooth: [/b]Specify if the lines should be smoothed. [i]Default is false.[/i][/li][li indent=0 align=left][b]Full width: [/b] When set to true, the last grid line on the x-axis is not drawn and the chart elements will expand to the full available width of the chart. [i]Default is true.[/i][/li][li indent=0 align=left][b]High (Optional): [/b]Overriding the natural high of the chart allows you to zoom in or limit the charts highest displayed value.[/li][li indent=0 align=left][b]Low (Optional): [/b]Overriding the natural low of the chart allows you to zoom in or limit the charts highest displayed value.[/li][li indent=0 align=left][b]Background Color:[/b] Fill the grid background color. [i]Default is white.[/i][/li][li indent=0 align=left][b]SVG (Optional):[/b] Custom SVG resource to replace linecap/dots.[/li][li indent=0 align=left][b]Label Color: [/b]The color of the x-axis and y-axis labels.. [i]Default is black.[/i][/li][/ul][/ml] [b][color=rgb(230, 0, 0)]BarChart[/color][/b][color=rgb(230, 0, 0)] [/color] This is the element that can be used to display and compare discrete categories of data (series) through rectangles bars (horizontal or vertical), where the length or height of each bar is proportional to the frequency or value of the corresponding category.