## 📖 Premium Pro Charts Bundle: Setup & Usage Instructions
This plugin provides three high-performance chart elements to display your data beautifully. Each element handles data rendering client-side with complete responsiveness.

### 🧱 The 3 Core Elements

Referencing `image_fcb82f.png`, your plugin includes:

1. **Bar/Line/Area Chart**: Ideal for single-type metric tracking over standard intervals.
2. **Pie/Donut Chart**: Perfect for proportional data breakdowns and percentage compositions.
3. **Mixed Bar/Line/Area Chart**: Advanced element built for plotting multi-series datasets with combined visualization types (e.g., Target bars with actual trendlines).

---

## 🛠️ Step-by-Step Configuration Guide

### 1. Basic Setup (All Elements)

* Drag your chosen element from `image_fcb82f.png` onto your canvas.
* Use standard Bubble responsive controls or the element property editor to define width and height. The chart automatically scales to fill its parent container.
* Customize the visual aesthetics using the standard property fields (font families, grid line weights, background fills, and border radii).

### 2. Configuring Data Sources

#### For **Bar/Line/Area Chart** & **Pie/Donut Chart**:

* **Labels Data Source**: Expects a list of texts or dates (e.g., `Search for Orders:each item's Created Date:formatted as...` or `Search for Products:each item's Name`).
* **Series 1 Values**: Expects a list of numbers matching the exact length of your labels (e.g., `Search for Orders:each item's Total Price`).
* **Chart Type Property**: For the basic multi-type element, toggle the dropdown property to select whether it displays as a `Bar`, `Line`, or `Area` layout.

#### For **Mixed Bar/Line/Area Chart**:

This element allows you to overlay different chart types on the same canvas.

* **X-Axis Labels**: Provide your primary horizontal intervals or categories.
* **Dataset 1 (Primary)**: Enter your primary list of numbers and assign its rendering type (e.g., Set Dataset 1 to `Bar`).
* **Dataset 2 (Secondary)**: Enter your secondary list of numbers and assign its rendering type (e.g., Set Dataset 2 to `Line`). This creates a mixed layout ideal for comparative analysis (e.g., Sales revenue bars layered underneath a gross profit percentage line).

---

## ⚡ Workflows & Interactive Actions

Each element comes equipped with built-in actions you can trigger from your **Workflow** tab:

* **Refresh Data**: Dynamically forces the chart context to redraw and fetch updated database lists without a full page refresh.
* **Download Chart**: Triggers a browser download of the current chart view. You can configure the action parameter to export as an image (`PNG`, `SVG`) or raw spreadsheet values (`CSV`).
* **Reset Zoom**: Reverts the viewport coordinates to default scale if zooming/panning behaviors are enabled in your element properties.

---

## 📡 Exposed States & Events

Use these properties in the Bubble expression editor to build reactive user interfaces:

* **`Current Hovered Value`**: Captures the raw number of the data point the user is hovering over.
* **`Selected Label/Category`**: Triggers a workflow event when a specific data point or bar is clicked. Use this event to display matching item details in an adjacent group or open a deep-linked pop-up.

---

## 💡 Troubleshooting & Performance Tips

* **Empty Context Error**: If you encounter context errors during initialization, ensure the element is not inside a hidden group on page load (`This element is visible on page load` unchecked). If it is hidden, use the **Refresh Data** action in a workflow immediately following the "Show Element" action.
* **Mismatched Lists**: Always make sure your X-axis labels list length strictly matches your dataset values list length. If a category is missing a value, format your search constraints to return a `0` instead of a null item to avoid broken gridlines.

Demo Page URL: https://hks-demos.bubbleapps.io/version-test/premium_pro_charts_bundle?debug_mode=true

Demo Editor URL: https://bubble.io/page?id=hks-demos&tab=Design&name=Mixed+Chart&type=custom&elements=cmOBQ