Element 1 (amcharts)
1. Data Preparation


To display data, this chart requires two main components:

X-Axis Data: A comma-separated string of categories (e.g., Jan, Feb, Mar, Apr).

Series Data (S1–S5): Comma-separated strings of numbers (e.g., 10, 25, 15, 30).

Pro Tip: Use the :format as text operator on your list of Things in Bubble. Join the values with a comma (,) and ensure there are no trailing commas for the best results.


2. Series Configuration

Each of the 5 series can be customized independently:

Type: Choose between Line, Bar, Area, or Bullet.

Curve: (Line/Area only) Select Default (straight), Smooth (bezier), or Step.

Color: Supports standard Hex and RGBA. If you use a color picker with transparency, the chart will automatically apply that opacity to the fills and strokes.


3. Activating the Dumbbell Plot

To create a Dumbbell chart (connecting two data points with a vertical line):

Set Dumbbell Line to true.

Ensure you have at least two series active (e.g., S1 and S2).

The plugin will automatically pair them (S1 with S2, S3 with S4).

Set the Dumbbell Width and Color Mode in the property editor.

4. Interactive Toolbar

The chart automatically includes a floating toolbar in the bottom-left corner.

Eye Icons: Toggle the visibility of Axis Labels.

Grid Icons: Toggle the background Grid Lines.

The toolbar features a "glassmorphism" effect and will automatically scale with the chart container.

5. Handling Events

You can trigger Bubble workflows when a user clicks a data point:

Use the "A Plotter point is clicked" event.

Access the specific data via the element's states: clicked_x_value, clicked_y_value, and clicked_series_name.

Field-by-Field Reference

X-Axis Data: The labels along the bottom (e.g., Dates or Names).

Series [N] Name: The label that appears in the legend and tooltips.

Tooltip Format: Use {category} and {value} as placeholders for dynamic labels.

Bullet Style: Choose Fill for solid dots or Outline for hollow rings.

Dumbbell Color Mode: Static uses a single color; Dynamic uses the colors of the connected series.


Element 2: Multi-Colored Bar Chart
Best for: Visualizing a single data series where each individual bar needs its own specific color (e.g., Sentiment analysis: Red for negative, Green for positive).

Description
A specialized Bar Chart designed for high-impact visual categorization. Unlike standard charts where one series shares one color, this element allows you to pass a list of colors corresponding to your data points. It also features "Smart Guidelines" that automatically calculate and display High, Low, and Average markers.

Key Features
Per-Bar Coloring: Pass a list of hex codes to color each bar individually.

Dynamic Guidelines: Toggle-able lines for High, Low, and Average values.

Smart State Publishing: Automatically exports the High/Low/Avg values and names back to Bubble as states.

Custom Aesthetics: Adjustable bar roundness (top corners) and interactive tooltips.

User Controls: Built-in floating toolbar to toggle axes and grids on the fly.

Bubble Instructions (How to use)
Data Lists: This element uses Bubble Lists. For X-Axis List, provide a list of texts. For Y1 Values List, provide a list of numbers.

Color List: Provide a list of colors (Hex or CSS names). Ensure the count matches your Y1 list.

Threshold Lines: Enable "Show High/Low/Avg Line" in the properties to see the automatic guidelines.

Bar Roundness: Enter a pixel value (e.g., 10) to round the top corners of the bars.



Element 3: Multi-Value Bar Chart
Best for: Comparing 2 or 3 different metrics across the same categories (e.g., Projected vs. Actual vs. Last Year).

Description
A professional-grade Clustered Bar Chart that supports up to 3 distinct data series. This element is optimized for comparison, placing bars side-by-side (clustered) with a clean, animated legend and a horizontal scrollbar for large datasets.

Key Features
Clustered Comparison: Compare up to 3 series (Y1, Y2, Y3) side-by-side.

Automated Legend: A responsive legend at the top allows users to toggle series on/off.

Interactive Effects: Smooth "hover" states with shadow depth and fill shifts.

Horizontal Zoom: Includes a dedicated scrollbar handle for navigating wide charts with many categories.

Persistence Logic: The UI toolbar remembers your visibility settings even when the data updates.

Bubble Instructions (How to use)
Data Strings: Provide your data as comma-separated strings (e.g., 10, 20, 30).

Series Names: Labels entered in the "Name" fields will appear in the Legend and the Tooltips.

Styling: Use the color pickers for Y1, Y2, and Y3 to brand your chart.

Clustering: The chart automatically adjusts bar width based on how many series you provide.