Example Using the Candlestick/Mixed Chart in Bubble
Install Plugin – In Bubble, go to Plugins → Add plugins, search for the Candlestick/Mixed Chart plugin, and install it.

Add to Page – In the Design tab, drag the Candlestick Chart element onto your page.

Provide Data –

JSON Config – Set the json property to a JSON string with labels and datasets.

For candlesticks, each dataset’s type should be "candlestick" and data items should be in OHLC format (o, h, l, c) or [open, high, low, close] arrays.

You can mix other chart types (line, bar, area) in the same datasets array.

Example JSON:

json
Copy
Edit
{
 "labels": ["2025-01-01", "2025-01-02"],
 "datasets": [
   {
     "type": "candlestick",
     "label": "Stock A",
     "data": [
       { "x": "2025-01-01", "o": 100, "h": 110, "l": 90, "c": 105 },
       { "x": "2025-01-02", "o": 105, "h": 115, "l": 95, "c": 100 }
     ]
   }
 ]
}
Customize Chart – Adjust legend, tooltip, axis settings, colors, grid lines, and animation in the property editor.

Use Click Events – In workflows, use:

candlestick_clicked for OHLC data points. Access selected_date, selected_open, selected_high, selected_low, selected_close, selected_change, selected_change_percent.

data_point_clicked for other chart types. Access selected_label, selected_series_label, selected_value, selected_id.

Preview – Skeleton loader appears while data is loading. Chart renders automatically when ready.


Demo: https://ncv-react-charts.bubbleapps.io/version-test/api/1.1/mobile/preview?debug_mode=true&preview_view=candlestick

Editor: https://bubble.io/page?id=ncv-react-charts&tab=Design&name=candlestick&type=page