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.
[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]
[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]
[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.
[ml][ul][li indent=0 align=left][b]Bar Type: [/b]There are three types of bar charts available.[/li][li indent=0 align=left][b]Distribute series: [/b]Each bar will represent a series and the data is expected to be one dimensional data. This is useful if the bar chart should represent a profile rather than some data over time.[/li][li indent=0 align=left][b]Stacked: [/b]If set to true this property will cause the series bars to be stacked.[/li][li indent=0 align=left][b]Bi-polar: [/b]Enables range limit set with low and high in y-axis. There is also an interpolation function used to skip every odd grid label.[/li][li indent=0 align=left][b]Data Labels: [/b]Labels data that can contain any sort of values.[/li][li indent=0 align=left][b]Serie A: [/b]Contains a series of objects.[/li][li indent=0 align=left][b]Bar Width (Optional): [/b]Specify a width of the bar.[/li][li indent=0 align=left][b]Bar Color (Optional): [/b]The color of the bar.[/li][li indent=0 align=left][b]Dashed Bar: [/b]If checked, the bar should be dashed. [i]Default is false.[/i][/li][li indent=0 align=left][b]Serie B: [/b]Contains a series of objects.[/li][li indent=0 align=left][b]Bar Width (Optional): [/b]Specify a width of the bar.[/li][li indent=0 align=left][b]Bar Color (Optional): [/b]The color of the bar.[/li][li indent=0 align=left][b]Dashed Bar: [/b]If checked, the bar should be dashed. [i]Default is false.[/i] [/li][li indent=0 align=left][b]Serie C: [/b]Contains a series of objects.[/li][li indent=0 align=left][b]Bar Width (Optional): [/b]Specify a width of the bar.[/li][li indent=0 align=left][b]Bar Color (Optional): [/b]The color of the bar.[/li][li indent=0 align=left][b]Dashed Bar: [/b]If checked, the bar should be dashed. [i]Default is false.[/i][/li][li indent=0 align=left][b]Serie D: [/b]Contains a series of objects.[/li][li indent=0 align=left][b]Bar Width (Optional): [/b]Specify a width of the bar.[/li][li indent=0 align=left][b]Bar Color (Optional): [/b]The color of the bar.[/li][li indent=0 align=left][b]Dashed Bar: [/b]If checked, the bar should be dashed. [i]Default is false.[/i] [/li][li indent=0 align=left][b]Label Color: [/b]The color of the labels. [i]Default is black.[/i][/li][li indent=0 align=left][b]Show Grid:[/b] If the x-axis and y-axis should be shown or not. [i]Default is true.[/i][/li][li indent=0 align=left][b]Show Label:[/b] If the labels should be shown or not. [i]Default is true.[/i][/li][li indent=0 align=left][b]Horizontal bars[/b]: Invert axes of the bar chart in order to draw a horizontal bar chart. [i]Default is false.[/i][/li][li indent=0 align=left][b]Background Color (Optional):[/b] The background of the chart container.[/li][li indent=0 align=left][b]Series Bar Distance:[/b] Specify the distance in pixels of bars in a group. [i]Default is 15.[/i][/li][li indent=0 align=left][b]High:[/b] Overriding the natural high of the chart allows you to zoom in or limit the charts highest displayed value. [i]Default is 300.[/i][/li][li indent=0 align=left][b]Low:[/b] Overriding the natural low of the chart allows you to zoom in or limit the charts lowest displayed value. [i]Default is 0.[/i][/li][li indent=0 align=left][b]Label Interpolation:[/b] Skip every odd, even or none of grid labels. [i]Default is All.[/i][/li][li indent=0 align=left][b]Peak Appearance:[/b] Draw a svg shape (circle or line) to the peak of our bars. [i]Default is line.[/i][/li][/ul][/ml] [b][color=rgb(230, 0, 0)]PieChart[/color][/b][color=rgb(230, 0, 0)] [/color] The element you will need to add if you wanna create a circular statistical graphic which is divided into slices to illustrate numerical proportion or fraction.
[ml][ul][li indent=0 align=left][b]Data Labels: [/b]Can contain any sort of values.[/li][li indent=0 align=left][b]Serie[/b]: Contains a series of objects.[/li][li indent=0 align=left][b]Donut chart: [/b]If checked the donut will be used and donut will be drawn instead of pie slices. [i]Default is false.[/i][/li][li indent=0 align=left][b]Show Label: [/b]If label should be shown or not. [i]Default is true.[/i][/li][li indent=0 align=left][b]Label Offset: [/b]Label position offset from the standard position which is half distance of the radius. [i]Default is 0. [/i]Option only makes sense if Show Label is checked.[/li][li indent=0 align=left][b]Label Color: [/b]Sets the label’s color. Option only makes sense if Show Label is checked.[/li][li indent=0 align=left][b]Label Direction: [/b]The labels anchor will be positioned based on those settings as well as the fact if the labels are on the right or left side of the center of the chart. [i]Default is neutral. [/i]Option only makes sense if Show Label is checked.[/li][li indent=0 align=left][b]Label Position: [/b]Positioned with 'inside' the labels will be placed on half the distance of the radius to the border of the Pie by respecting the 'labelOffset'. The 'outside' option will place the labels at the border of the pie and 'center' will place the labels in the absolute center point of the chart. The 'center' option only makes sense in conjunction with the 'labelOffset' option. [i]Default is inside. [/i]Option only makes sense if Show Label is checked.[/li][li indent=0 align=left][b]Show Percentage: [/b] If the percentage labels should be shown or not. [i]Default is false. [/i]Option only makes sense if Show Label is checked.[/li][li indent=0 align=left][b]Donut width: [/b]Specify a relative width. [i]Default is 60.[/i][/li][li indent=0 align=left][b]Start Angle: [/b]The start angle of the pie chart in degrees where 0 points north. A higher value offsets the start angle clockwise. [i]Default is 0.[/i][/li][li indent=0 align=left][b]Total (Optional): [/b]By specifying a total value, the sum of the values in the serie must be this total in order to draw a full pie. Number values are allowed.[/li][li indent=0 align=left][b]Background Color (Optional): [/b]The background color of the grid.[/li][li indent=0 align=left][b]Border Color:[/b] The slices color.[/li][li indent=0 align=left][b]Border Width:[/b] The slices width. [i]Default is 0.[/i][/li][/ul][/ml]