🚀 How to Use Ultimate Charts Studio
Ultimate Charts Studio includes 3 independent elements:

Standard Charts
Use this element for Line, Area, Bar, Column, Clustered Column, Horizontal Bar, Radar, Distribution, and mixed charts.

Circular Charts
Use this element for Pie, Doughnut, and Radial Progress charts.

KPI / Gauge Charts
Use this element for Thermometer, Speedometer, Progress Bar, Horizontal Battery Level, and Vertical Battery Level charts.

1. Choose a chart element

Add one of the plugin elements to your page:

• Standard Charts
• Circular Charts
• KPI / Gauge Charts

Each element has its own fields, states, events, and actions.

2. Use presets or manual types

Most elements include a field called visualization_preset.

If visualization_preset is different from None, the preset controls the chart type.

If visualization_preset is None, the chart uses the manual type or series type fields.

3. Standard Charts data format

For Standard Charts:

• data_axis_x uses comma-separated labels.
Example:
Jan,Feb,Mar,Apr

• series_X_values uses semicolon-separated values.
Example:
100;250;180;320

This allows users to use formatted numbers with commas without breaking the data list.

Example:
25,000;18,500;30,000

Standard Charts supports up to 5 series:

• series_1_label
• series_1_values
• series_1_color
• series_1_type

Repeat the same pattern up to series_5.

Series 2 to 5 are only displayed when their values field is not empty.

4. Circular Charts data format

For Circular Charts:

• labels uses comma-separated values.
Example:
Chrome,Safari,Edge,Firefox

• values uses semicolon-separated values.
Example:
69.65;15.31;5.21;3.33

• colors uses comma-separated colors.
Example:
#4285F4,#0A84FF,#0078D7,#FF7139

For Radial Progress, the percentage is calculated from the values list.

5. KPI / Gauge Charts data format

For KPI / Gauge Charts, use:

• min_value
• max_value
• current_value

The state current_percentage is calculated as:

current_value / max_value * 100

You can format the displayed value using:

• preffix
• suffix
• decimal_place
• decimal_separator
• thousand_separator

6. Tooltips

Some elements support tooltip templates.

Available placeholders may include:

• [CURRENT_VALUE]
• [CURRENT_LABEL]
• [CURRENT_PERCENTAGE]
• [CURRENT_LABEL_X]

Example:
[CURRENT_LABEL]: [CURRENT_VALUE]

7. Actions

Available actions depend on the element.

Common action:

Download Chart
Exports the current chart as PNG, JPG, SVG, or PDF.

Download action fields:

• filename
• extension
• save_to_bubble_storage
• auto_download

Standard Charts also includes:

Invert Series and X Axis
This action transposes the active chart data. Series labels become the X-axis labels, and X-axis labels become series labels. Running the action again toggles the chart back.

8. States and events

Each element exposes useful states such as:

• is_ready
• has_data
• current_type
• current_preset
• selected_value
• selected_percentage
• chart_width
• chart_height
• file

Events may include:

• chart_is_ready
• data_has_changed
• no_data_detected
• animation_finished

Use these states and events to trigger Bubble workflows, display selected values, save exported files, or react when no data is available.

9. Recommended setup

Start with a preset if you want a fast setup.

Use manual types when you need full control.

For dynamic Bubble data, format your lists carefully before passing them into the chart fields.

For the complete field reference and examples, see the documentation link in the plugin description.