Easy Charts - Professional Custom Charts
FreeEasy 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.
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]
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.
[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]