Bar Chart

A grouped bar chart with named, colored bars. Use it to compare a few values side by side — sensor readings, channel levels, scores per category.

[image] Bar Chart on canvas, three vertical bars labeled Temp / Humidity / Pressure with different colors

What it does

Bar Chart shows N bars side by side. You define each bar in the Inspector — its label, color, and unit — then your sketch pushes a number for each bar in slot order.

When to use it

• Environment dashboard — 3 bars: Temperature (red), Humidity (blue), Pressure (green). Update every few seconds with setValues().
• Channel meter — Up to 8 bars, one per audio channel.

Properties

The Inspector opens as a bottom sheet with a Widget ID field at the top, then these sections in order.

Widget ID

1. Essential

2. Header

3. Bars

A dynamic list of bars. Each bar receives one value from your sketch — send them in this order via setValues(values, count).

For each bar slot:

Plus per-bar action:

Plus list-level action:

4. Range

5. Grid

6. Appearance

7. Colors · Chart

8. Animation

States and behavior

[image] Two orientations side by side — Vertical (3 bars) and Horizontal (3 bars)

Bars animate to new heights when their values change. With Auto scale on, the chart re-scales as the maximum value moves.

In code

The widget mirrors what your sketch sends. To update all bars at once:

float values[3] = { 22.5, 65.0, 1013.0 };
instant.barChart("env").setValues(values, 3);

That’s the minimum — push an array, the bars match the slots in the Inspector. Don’t put this call directly in loop() — Arduino’s loop() runs thousands of times per second, which would flood the link. Use a timer to push at a sensible rate (200–1000 ms is plenty).

Available methods:

• .setValues(const float* arr, uint8 count) — Push the whole array at once.
• .setBar(uint8 index, float value) — Update a single bar by 0-based index.
• .clear() — Reset all bars to 0.

See InstantIoT Library / Send Data to App.

Working Arduino code example

A complete sketch you can flash. The Widget ID env matches the one you set on your Bar Chart in the app. The chart has 3 slots in this order: Temperature, Humidity, Pressure.

[gif] Bar Chart on the dashboard, three bars updating their heights as the ESP32 pushes values

Direct Mode

Your phone connects directly to the ESP32’s SoftAP — no router, no server. Best for prototyping and standalone setups.

#include <InstantIoTWiFiAP.hpp>
#include <utils/InstantIoTTimer.hpp>

const char* AP_SSID = "InstantIoT-Greenhouse";
const char* AP_PASS = "12345678";

InstantIoTWiFiAP instant(AP_SSID, AP_PASS);
InstantTimer timers;

float readTemp()     { return 20.0f + (random(0, 100) / 10.0f); }
float readHumidity() { return 40.0f + (random(0, 200) / 10.0f); }
float readPressure() { return 1010.0f + (random(0, 100) / 10.0f); }

void pushBars() {
  if (!instant.connected()) return;
  float values[3] = { readTemp(), readHumidity(), readPressure() };
  instant.barChart("env").setValues(values, 3);
}

void setup() {
  instant.begin();
  timers.every(1000, pushBars);
}

void loop() {
  instant.loop();
  timers.run();
}

Server Mode

The ESP32 connects to your self-hosted InstantIoT Server over WiFi. Multiple devices, persistent state, history.

#include <InstantIoTWiFiServer.hpp>
#include <utils/InstantIoTTimer.hpp>

const char*    WIFI_SSID     = "YOUR_WIFI_SSID";
const char*    WIFI_PASS     = "YOUR_WIFI_PASSWORD";
const char*    SERVER_IP     = "192.168.1.42";
const uint16_t SERVER_PORT   = 9001;
const char*    DEVICE_TOKEN  = "YOUR_DEVICE_TOKEN";

InstantIoTWiFiServer instant(SERVER_IP, SERVER_PORT, DEVICE_TOKEN);
InstantTimer timers;

float readTemp()     { return 20.0f + (random(0, 100) / 10.0f); }
float readHumidity() { return 40.0f + (random(0, 200) / 10.0f); }
float readPressure() { return 1010.0f + (random(0, 100) / 10.0f); }

void pushBars() {
  if (!instant.connected()) return;
  float values[3] = { readTemp(), readHumidity(), readPressure() };
  instant.barChart("env").setValues(values, 3);
}

void setup() {
  instant.begin(WIFI_SSID, WIFI_PASS);
  timers.every(1000, pushBars);
}

void loop() {
  instant.loop();
  timers.run();
}

The widget code is identical — only the include and constructor change.

Notes

• This is a Display — no Target Devices dropdown.
• The order of values matches the order of bars in the Inspector. Reordering bars in the app reorders them on the device side too.
• For time-evolving data (history), use Advanced Chart instead.

Next

→ Advanced Chart — When values evolve over time and you want history.

→ Horizontal / Vertical Level — When the value is a single fill, not a comparison.