Charts for Bubble Mobile

✅

Link to the plugin page: https://zeroqode.com/plugin/charts-for-bubble-mobile-1743422416736x503435475852947300

Demo to preview the plugin:

✅

Live Demo: https://zeroqode-native-demo-01.bubbleapps.io/api/1.1/mobile/preview?debug_mode=true&preview_view=Charts

✅

Bubble Editor: https://bubble.io/page?id=zeroqode-native-demo-01&test_plugin=1743075669347x547602253682573300_current&tab=Design&name=Charts&type=page&version=live

Introduction

Charts Native is a lightweight and versatile charting plugin for Bubble applications. It allows you to easily create and customize various chart types including line, bar, and pie charts. With a simple JSON data structure, you can visualize your data with minimal setup. The plugin is designed to be responsive and works well in various screen sizes, making it perfect for both desktop and mobile applications.

Prerequisites

No external API accounts or services are required for this plugin. The plugin works natively within your Bubble application with no additional dependencies.

This plugin is designed specifically for the mobile version of the Bubble editor. To test the plugin on your mobile device, use the TestFlight app available at: https://testflight.apple.com/join/4fXUggud

⚠️

Please note that the testing app is currently available for iOS only.

How to setup

Setting up Charts for Bubble Mobile is straightforward as it does not require any external API keys or configurations:

Install the Charts for Bubble Mobile plugin from the Bubble plugin marketplace.

Add the desired chart element to your page from the Elements panel.

Configure the chart properties in the Property Editor panel.

Supply your data in JSON format and customize the appearance as needed.

Plugin Element Properties

The plugin contains different main visual elements that should be used on mobile pages.

Line Chart

Fields:

Title	Description	Type
Data JSON	JSON string containing the data to be visualized in the chart	Text
showLegend	Toggles the visibility of the chart legend	Boolean
showLabels	Toggles the visibility of data labels on the chart	Boolean
axisColor	Sets the color of the chart axes	Text
backgroundColor	Sets the background color of the chart area	Text
title	Sets the title text displayed above the chart	Text
showTooltips	Whether to show tooltips on hover/tap	Boolean
tooltipBackgroundColor	Background color of tooltips	Color
tooltipTextColor	Text color of tooltips	Color
animate	Enables or disables chart animations	Boolean
animationDuration	Duration of chart animations in milliseconds	Number
showGrid	Whether to show grid lines on the chart	Boolean
gridColor	Color of the grid lines	Text
lineStyle	Style of the line: straight, curved, or stepped	Dropdown
lineWidth	Width of the line in pixels	Number
showMarkers	Whether to show markers at data points	Boolean
markerSize	Size of data point markers in pixels	Number
markerStyle	Style of data point markers	Dropdown
markerColor	Color of markers (auto uses line color)	Text
enableGradient	Enable gradient effects	Boolean
gradientStartColor	Start color for gradient	Text
gradientEndColor	End color for gradient	Text
enableAreaFill	Enable area fill under the line	Boolean
areaFillOpacity	Opacity of area fill	Number

States:

Name	Description	Type
currentData	Current chart data in JSON format	Text
error	Error message if chart fails to render	Text
selected_label	Label of the selected chart item	Text
selected_value	Value of the selected chart item	Number
tooltipVisible	Whether tooltip is currently visible	Boolean
tooltipData	Data of the currently displayed tooltip	Text
animationState	Current animation state	Text
currentMarkerStyle	Current marker style being used	Text
currentMarkerColor	Current marker color	Text

Events:

Name	Description
Item Selected	Triggered when a user taps/clicks on a chart item
onTooltipShow	Triggered when a tooltip becomes visible
onTooltipHide	Triggered when a tooltip is hidden
animation_completed	Triggered when chart animation completes
series_selected	Triggered when a series is selected

Bar Chart

Fields:

Title	Description	Type
Data JSON	JSON string containing the data to be visualized in the chart	Text
showLegend	Toggles the visibility of the chart legend	Boolean
showLabels	Toggles the visibility of data labels on the chart	Boolean
axisColor	Sets the color of the chart axes	Text
backgroundColor	Sets the background color of the chart area	Text
title	Sets the title text displayed above the chart	Text
showTooltips	Whether to show tooltips on hover/tap	Boolean
tooltipBackgroundColor	Background color of tooltips	Color
tooltipTextColor	Text color of tooltips	Color
animate	Enables or disables chart animations	Boolean
showGrid	Whether to show grid lines	Boolean
showDataLabels	Whether to show data labels on bars	Boolean
barStyle	Style of bars: rounded, square, or gradient	Dropdown
barGrouping	Bar grouping: grouped or stacked	Dropdown
barSpacing	Spacing between bars (0-1)	Number
barWidth	Width of bars (0-1)	Number
showMarkers	Whether to show markers	Boolean
markerColor	Color of markers	Text
markerSize	Size of markers	Number
markerStyle	Style of markers	Dropdown
enableGradient	Enable gradient effects	Boolean
gradientStartColor	Start color for gradient	Text
gradientEndColor	End color for gradient	Text
barShadow	Enable bar shadows	Boolean
shadowColor	Color of shadows	Text
shadowOpacity	Opacity of shadows	Number
gridColor	Color of grid lines	Text
animationDuration	Duration of animations in milliseconds	Number
animationType	Type of animation: growUp, fadeIn, slideIn	Dropdown

States:

Name	Description	Type
currentType	Current chart type being displayed	Text
currentData	Current chart data in JSON format	Text
error	Error message if chart fails to render	Text
selected_label	Label of the selected chart item	Text
selected_value	Value of the selected chart item	Number
tooltipVisible	Whether tooltip is currently visible	Boolean
tooltipData	Data of the currently displayed tooltip	Text
currentBarStyle	Current bar style being used	Text
animationState	Current animation state	Text
currentGrouping	Current grouping mode	Text
selectedSeries	Currently selected series	Text
hoveredBar	Currently hovered bar information	Text

Events:

Name	Description
Item Selected	Triggered when a user taps/clicks on a chart item
onTooltipShow	Triggered when a tooltip becomes visible
onTooltipHide	Triggered when a tooltip is hidden
Animation Completed	Triggered when chart animation completes
Chart Complete	Triggered when chart rendering is complete
series_selected	Triggered when a series is selected
bar_hover	Triggered when hovering over a bar
bar_leave	Triggered when leaving a bar

Pie Chart

Fields:

Title	Description	Type
Data JSON	JSON string containing the data to be visualized in the chart	Text
showLegend	Toggles the visibility of the chart legend	Boolean
showLabels	Toggles the visibility of data labels on the chart	Boolean
axisColor	Sets the color of the chart axes	Text
backgroundColor	Sets the background color of the chart area	Text
title	Sets the title text displayed above the chart	Text
showTooltips	Whether to show tooltips on hover/tap	Boolean
tooltipBackgroundColor	Background color of tooltips	Color
tooltipTextColor	Text color of tooltips	Color
animate	Enables or disables chart animations	Boolean
explodeDistance	Distance for exploded segments	Number
startAngle	Starting angle of the pie chart	Number
sortData	Whether to sort data	Boolean
sortOrder	Sort order: asc or desc	Dropdown
labelPosition	Position of labels: inside, outside, edge	Dropdown
labelStyle	Style of labels: percentage, value, both, label	Dropdown
showLines	Whether to show connecting lines	Boolean
enableGradient	Enable gradient effects	Boolean
gradientType	Type of gradient: linear or radial	Dropdown
enableShadow	Enable shadow effects	Boolean
shadowColor	Color of shadows	Text
shadowOpacity	Opacity of shadows	Number
strokeWidth	Width of stroke	Number
strokeColor	Color of stroke	Text
animationType	Type of animation: grow, rotate, fade	Dropdown
animationDuration	Duration of animations in milliseconds	Number
minSectorAngle	Minimum angle for small sectors (0-30)	Number

States:

Name	Description	Type
currentType	Current chart type being displayed	Text
currentData	Current chart data in JSON format	Text
error	Error message if chart fails to render	Text
selected_label	Label of the selected chart item	Text
selected_value	Value of the selected chart item	Number
tooltipVisible	Whether tooltip is currently visible	Boolean
tooltipData	Data of the currently displayed tooltip	Text
selectedSector	Currently selected sector	Text
animationState	Current animation state	Text
currentChartStyle	Current chart style	Text
hoveredSector	Currently hovered sector	Text
totalValue	Total value of all pie segments	Number

Events:

Name	Description
Item Selected	Triggered when a user taps/clicks on a chart item
onTooltipShow	Triggered when a tooltip becomes visible
onTooltipHide	Triggered when a tooltip is hidden
Animation Completed	Triggered when chart animation completes
Sector Hover	Triggered when hovering over a sector
Sector Leave	Triggered when leaving a sector
Chart Complete	Triggered when chart rendering is complete
Sector Exploded	Triggered when a sector is exploded

Area Chart

Fields:

Title	Description	Type
Data JSON	JSON string containing the data to be visualized in the chart	Text
showLegend	Toggles the visibility of the chart legend	Boolean
showLabels	Toggles the visibility of data labels on the chart	Boolean
axisColor	Sets the color of the chart axes	Text
backgroundColor	Sets the background color of the chart area	Text
title	Sets the title text displayed above the chart	Text
showTooltips	Whether to show tooltips on hover/tap	Boolean
tooltipBackgroundColor	Background color of tooltips	Color
tooltipTextColor	Text color of tooltips	Color
animate	Enables or disables chart animations	Boolean
showGrid	Whether to show grid lines	Boolean
showDataLabels	Whether to show data labels	Boolean
legendType	Type of legend: areas or series	Dropdown
areaStyle	Style of area: filled, stacked, overlapped, streamgraph	Dropdown
curveType	Type of curve: linear, curved, stepped	Dropdown
areaOpacity	Opacity of area fill	Number
lineWidth	Width of lines	Number
showPoints	Whether to show data points	Boolean
pointStyle	Style of points: circle, square, triangle, diamond	Dropdown
pointSize	Size of points	Number
enableGradient	Enable gradient effects	Boolean
gradientDirection	Direction of gradient: vertical, horizontal, radial	Dropdown
gradientStartColor	Start color for gradient	Text
gradientEndColor	End color for gradient	Text
fillPattern	Pattern for fill: solid, dots, lines, cross	Dropdown
baselineValue	Value for baseline	Number
showBaseline	Whether to show baseline	Boolean
gridColor	Color of grid lines	Text
animationType	Type of animation: growVertical, growHorizontal, fade, wave	Dropdown
animationDuration	Duration of animations in milliseconds	Number

States:

Name	Description	Type
currentData	Current chart data in JSON format	Text
error	Error message if chart fails to render	Text
selected_label	Label of the selected chart item	Text
selected_value	Value of the selected chart item	Number
tooltipVisible	Whether tooltip is currently visible	Boolean
tooltipData	Data of the currently displayed tooltip	Text
selectedSeries	Currently selected series	Text
animationState	Current animation state	Text
currentAreaStyle	Current area style	Text
currentCurveType	Current curve type	Text
hoveredPoint	Currently hovered point information	Text

Events:

Name	Description
Item Selected	Triggered when a user taps/clicks on a chart item
onTooltipShow	Triggered when a tooltip becomes visible
onTooltipHide	Triggered when a tooltip is hidden
animation_completed	Triggered when chart animation completes
series_selected	Triggered when a series is selected
point_hover	Triggered when hovering over a point
point_leave	Triggered when leaving a point
chart_complete	Triggered when chart rendering is complete

Horizontal Bar Chart

Fields:

Title	Description	Type
Data JSON	JSON string containing the data to be visualized in the chart	Text
showLegend	Toggles the visibility of the chart legend	Boolean
showLabels	Toggles the visibility of data labels on the chart	Boolean
axisColor	Sets the color of the chart axes	Text
backgroundColor	Sets the background color of the chart area	Text
title	Sets the title text displayed above the chart	Text
showTooltips	Whether to show tooltips on hover/tap	Boolean
tooltipBackgroundColor	Background color of tooltips	Color
tooltipTextColor	Text color of tooltips	Color
animate	Enables or disables chart animations	Boolean
showGrid	Whether to show grid lines	Boolean
showDataLabels	Whether to show data labels	Boolean
legendType	Type of legend: bars or series	Dropdown
barStyle	Style of bars: rounded, square, rounded-right	Dropdown
barGrouping	Grouping of bars: grouped or stacked	Dropdown
barSpacing	Spacing between bars (0-1)	Number
barHeight	Height of bars (0-1)	Number
showMarkers	Whether to show markers	Boolean
markerStyle	Style of markers	Dropdown
markerColor	Color of markers	Text
markerSize	Size of markers	Number
enableGradient	Enable gradient effects	Boolean
gradientStartColor	Start color for gradient	Text
gradientEndColor	End color for gradient	Text
barShadow	Enable bar shadows	Boolean
shadowColor	Color of shadows	Text
shadowOpacity	Opacity of shadows	Number
gridColor	Color of grid lines	Text
animationType	Type of animation: growRight, fadeIn, slideIn	Dropdown
animationDuration	Duration of animations in milliseconds	Number

States:

Name	Description	Type
currentType	Current chart type being displayed	Text
currentData	Current chart data in JSON format	Text
error	Error message if chart fails to render	Text
selected_label	Label of the selected chart item	Text
selected_value	Value of the selected chart item	Number
tooltipVisible	Whether tooltip is currently visible	Boolean
tooltipData	Data of the currently displayed tooltip	Text
selectedSeries	Currently selected series	Text
animationState	Current animation state	Text
currentBarStyle	Current bar style	Text
currentGrouping	Current grouping mode	Text
hoveredBar	Currently hovered bar information	Boolean

Events:

Name	Description
Item Selected	Triggered when a user taps/clicks on a chart item
onTooltipShow	Triggered when a tooltip becomes visible
onTooltipHide	Triggered when a tooltip is hidden
Animation Completed	Triggered when chart animation completes
Series Selected	Triggered when a series is selected
Bar Hover	Triggered when hovering over a bar
Bar Leave	Triggered when leaving a bar
Chart Complete	Triggered when chart rendering is complete

Donut Chart

Fields:

Title	Description	Type
Data JSON	JSON string containing the data to be visualized in the chart	Text
showLegend	Toggles the visibility of the chart legend	Boolean
showLabels	Toggles the visibility of data labels on the chart	Boolean
axisColor	Sets the color of the chart axes	Text
backgroundColor	Sets the background color of the chart area	Text
title	Sets the title text displayed above the chart	Text
showTooltips	Whether to show tooltips on hover/tap	Boolean
tooltipBackgroundColor	Background color of tooltips	Color
tooltipTextColor	Text color of tooltips	Color
animate	Enables or disables chart animations	Boolean
legendType	Type of legend: segments or series	Dropdown
segmentStyle	Style of segments: normal, rounded, separated	Dropdown
segmentGap	Gap between segments	Number
enableGradient	Enable gradient effects	Boolean
gradientType	Type of gradient: linear or radial	Dropdown
enableShadow	Enable shadow effects	Boolean
shadowOpacity	Opacity of shadows	Number
showDataLabels	Whether to show data labels	Boolean
showCenterInfo	Whether to show center information	Boolean
centerTextColor	Color of center text	Boolean
innerRadius	Inner radius of donut (0-1)	Number
startAngle	Starting angle	Number
sortSegments	Sort segments: none, ascending, descending	Dropdown
minSegmentPercentage	Minimum percentage for segment display	Number
animationType	Type of animation: fade, grow, rotate	Dropdown
animationDuration	Duration of animations in milliseconds	Number

States:

Name	Description	Type
currentType	Current chart type being displayed	Text
currentData	Current chart data in JSON format	Text
error	Error message if chart fails to render	Text
selected_label	Label of the selected chart item	Text
selected_value	Value of the selected chart item	Number
tooltipVisible	Whether tooltip is currently visible	Boolean
tooltipData	Data of the currently displayed tooltip	Text
animationState	Current animation state	Text
selected_series	Currently selected series	Text
currentSegmentStyle	Current segment style	Text
selectedSeriesIndex	Index of selected series	Number
centerData	Data displayed in center	Text
hoveredSegmentIndex	Index of hovered segment	Number
totalValue	Total value of all segments	Number
visibleSegmentsCount	Count of visible segments	Number

Events:

Name	Description
Item Selected	Triggered when a user taps/clicks on a chart item
onTooltipShow	Triggered when a tooltip becomes visible
onTooltipHide	Triggered when a tooltip is hidden
Animation Completed	Triggered when chart animation completes
Series Selected	Triggered when a series is selected
Center Pressed	Triggered when center area is pressed
Segment Double Tap	Triggered when a segment is double tapped

Stacked Area Chart

Fields:

Title	Description	Type
Data JSON	Stacked chart data in JSON format with series and labels	Text
showLegend	Toggles the visibility of the chart legend	Boolean
showLabels	Toggles the visibility of data labels on the chart	Boolean
axisColor	Sets the color of the chart axes	Text
backgroundColor	Sets the background color of the chart area	Text
title	Sets the title text displayed above the chart	Text
showTooltips	Whether to show tooltips on hover/tap	Boolean
tooltipBackgroundColor	Background color of tooltips	Color
tooltipTextColor	Text color of tooltips	Color
animate	Enables or disables chart animations	Boolean
stackingMode	Stacking mode: normal or percent	Dropdown
animationType	Type of animation: fade, grow, slide	Dropdown
areaStyle	Style of area: normal, curved, stepped	Dropdown
enableGradient	Enable gradient effects	Boolean
gradientDirection	Direction of gradient: vertical or horizontal	Dropdown
enableAreaStroke	Enable area stroke	Boolean
strokeWidth	Width of stroke	Number
enableShadow	Enable shadow effects	Boolean
shadowOpacity	Opacity of shadows	Number
showDataLabels	Whether to show data labels	Boolean
showStackLabels	Whether to show stack labels	Boolean
showMarkers	Whether to show markers	Boolean
markerSize	Size of markers	Number
animationDuration	Duration of animations in milliseconds	Number

States:

Name	Description	Type
currentType	Current chart type being displayed	Text
currentData	Current chart data in JSON format	Text
error	Error message if chart fails to render	Text
selected_label	Label of the selected chart item	Text
selected_value	Value of the selected chart item	Number
tooltipVisible	Whether tooltip is currently visible	Boolean
tooltipData	Data of the currently displayed tooltip	Text
animationState	Current animation state	Text
currentStackingMode	Current stacking mode	Text
selectedDatasetIndex	Index of selected dataset	Number
stackTotals	Total values for each stack	Text
hoveredAreaIndex	Index of hovered area	Number
maxStackValue	Maximum stack value	Number
visibleSeriesCount	Count of visible series	Number

Events:

Name	Description
Item Selected	Triggered when a user taps/clicks on a chart item
onTooltipShow	Triggered when a tooltip becomes visible
onTooltipHide	Triggered when a tooltip is hidden
animation_completed	Triggered when chart animation completes
dataset_selected	Triggered when a dataset is selected
stack_selected	Triggered when a stack is selected
area_double_tap	Triggered when an area is double tapped

Stacked Bar Chart

Fields:

Title	Description	Type
Data JSON	Stacked chart data in JSON format with series and labels	Text
showLegend	Toggles the visibility of the chart legend	Boolean
showLabels	Toggles the visibility of data labels on the chart	Boolean
axisColor	Sets the color of the chart axes	Text
backgroundColor	Sets the background color of the chart area	Text
title	Sets the title text displayed above the chart	Text
showTooltips	Whether to show tooltips on hover/tap	Boolean
tooltipBackgroundColor	Background color of tooltips	Color
tooltipTextColor	Text color of tooltips	Color
animate	Enables or disables chart animations	Boolean
stackingMode	Stacking mode: normal or percent	Dropdown
animationType	Type of animation: fade, grow, slide	Dropdown
barStyle	Style of bars: normal, rounded, gradient	Dropdown
barOrientation	Orientation of bars: vertical or horizontal	Dropdown
enableGradient	Enable gradient effects	Boolean
gradientDirection	Direction of gradient: vertical or horizontal	Dropdown
enableShadow	Enable shadow effects	Boolean
shadowOpacity	Opacity of shadows	Number
showDataLabels	Whether to show data labels	Boolean
showStackLabels	Whether to show stack labels	Boolean
barSpacing	Spacing between bars (0-1)	Number
animationDuration	Duration of animations in milliseconds	Number

States:

Name	Description	Type
currentType	Current chart type being displayed	Text
currentData	Current chart data in JSON format	Text
error	Error message if chart fails to render	Text
selected_label	Label of the selected chart item	Text
selected_value	Value of the selected chart item	Number
tooltipVisible	Whether tooltip is currently visible	Boolean
tooltipData	Data of the currently displayed tooltip	Text
animationState	Current animation state	Text
currentStackingMode	Current stacking mode	Text
selectedDatasetIndex	Index of selected dataset	Number
stackTotals	Total values for each stack	Text
hoveredBarIndex	Index of hovered bar	Number
maxStackValue	Maximum stack value	Number
visibleSeriesCount	Count of visible series	Number
barWidth	Current bar width	Number

Events:

Name	Description
Item Selected	Triggered when a user taps/clicks on a chart item
onTooltipShow	Triggered when a tooltip becomes visible
onTooltipHide	Triggered when a tooltip is hidden
Animation Completed	Triggered when chart animation completes
Dataset Selected	Triggered when a dataset is selected
Stack Selected	Triggered when a stack is selected
Bar Double Tap	Triggered when a bar is double tapped

⬇️

Below you will see a description of the old elements. They are no longer supported

Chart (Deprecated)

Stacked Chart (Deprecated)

Workflow example

Example 1: Creating a Basic Line Chart

Add the Chart element to your page.

Set the chartType property to "line".

In the Data JSON field, enter your data in the following format:

plain text
[
  { "label": "January", "value": 120, "color": "#2196F3" },
  { "label": "February", "value": 90, "color": "#FF5722" },
  { "label": "March", "value": 150, "color": "#4CAF50" },
  { "label": "April", "value": 80, "color": "#9C27B0" },
  { "label": "May", "value": 200, "color": "#FFC107" }
]