ELEMENTS INCLUDED:   1. Bar Chart      -  vertical bars, supports 2 datasets
  2. Line Chart     -  smooth curves, supports 2 datasets
  3. Area Chart     -  filled line chart, supports 2 datasets
  4. Pie Chart      -  single dataset, % labels on slices
  5. Doughnut Chart - single dataset, % labels + center total

━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
SETUP (all charts):
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
1. Drag any chart element onto your page
2. Resize to your preferred dimensions
  Recommended: minimum 400×300px
3. Set fields:

  • labels         → comma separated category names
                     e.g. Jan,Feb,Mar,Apr,May,Jun
  • values         → comma separated numbers
                     e.g. 30,50,40,80,60,90
  • dataset_label  → name of primary dataset
                     (also shows as center label
                     in Doughnut chart)
  • color          → primary color (hex)
  • show_legend    → yes / no
  • show_grid      → yes / no (Bar, Line, Area only)
  • font_size      → label font size in px (default 12)

━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
TWO DATASET COMPARISON (Bar, Line, Area only):
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
  Supports maximum 2 datasets for comparison views.
  Perfect for year over year or plan vs actual comparisons.

  • second_values  → comma separated second dataset
                     e.g. 20,40,35,60,45,70
  • second_label   → second dataset name
  • second_color   → second dataset color (hex)

  ⚠️ Maximum 2 datasets supported
  ⚠️ Pie and Doughnut support single dataset only

━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
DOUGHNUT CENTER TEXT:
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
  Set dataset_label to show center text:
  • Center top    → total of all values (auto calculated)
  • Center bottom → dataset_label text
  e.g. dataset_label = "Total Sales"
  → Shows total number + "Total Sales" in center

━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
CONNECTING TO BUBBLE DATABASE:
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
  labels → Search for Things: each item's name field
           formatted as text with comma separator
  values → Search for Things: each item's value field
           formatted as text with comma separator

  Example:
  labels → Search for Sales:each item's month
           (format as list with , separator)
  values → Search for Sales:each item's revenue
           (format as list with , separator)

━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
CHART SPECIFIC TIPS:
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
  Bar Chart:
  • Best for comparing categories side by side
  • Use second dataset for year over year comparison

  Line Chart:
  • Best for showing trends over time
  • Use second dataset to compare two time series

  Area Chart:
  • Same as Line but filled underneath
  • Great for showing volume over time

  Pie Chart:
  • Percentage labels show automatically on slices
  • Slices under 5% hide label to avoid clutter
  • Best for 3 to 6 categories
  • Single dataset only

  Doughnut Chart:
  • Same as Pie with hollow center
  • Center shows total + dataset_label text
  • Best for 3 to 6 categories
  • Single dataset only

━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
GENERAL TIPS:
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
  • Use show_grid no for minimal clean look
  • All charts are fully responsive
  • Tooltips show on hover automatically
  • Leave second_values empty for single dataset
  • Pie and Doughnut auto generate color palette for up to 8 slices - no manual colors needed

Bubble editor link:
https://bubble.io/page?id=mbbuilds5&test_plugin=1789102107119x989305126628622300_current&tab=Design&name=charts_bundle&type=page&elements=bTHEX