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 Native is straightforward as it does not require any external API keys or configurations:

Install the Charts Native plugin from the Bubble plugin marketplace.

Add the 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 a Chart visual element that should be used on a page.

Chart

Fields:

Title	Description	Type
chartType	Defines the type of chart to display (line, bar, or pie)	Dropdown
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 (for line and bar charts)	Text (color code)
backgroundColor	Sets the background color of the chart area	Text (color code)
title	Sets the title text displayed above the chart	Text
animate	Enables or disables chart animations	Boolean
Data JSON	JSON string containing the data to be visualized in the chart	Text (long)

Exposed states

Plugin States are part of plugins that are exposed values of the plugin.

Name	Description	Type
currentType	The current chart type being displayed	Text
currentData	The current data being used in the chart	Text

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" }
]