Overview

Where bar and line charts answer "what is the value?", distribution charts answer "how does the value vary across observations?". This makes them essential for understanding datasets before summarizing them with a single average, for comparing the spread between two groups, or for spotting outliers that a summary statistic would hide.

Properties Reference

Histogram

A histogram divides the value range into equal-width buckets (bins) and plots a bar whose height represents the count (or density) of observations in that bucket. The shape of the bars reveals whether the data is normal, skewed, bimodal, or uniform.

Setting Up a Histogram

1. Bind raw data: Set Chart Type = histogram. Bind Data to an array of numbers — e.g. {{ ds_response_times.data.map(r => r.responseMs) }}.

2. Configure bins: Leave Bins as auto for most datasets. For a time-series like response times in milliseconds, set Bin Size = 50 to bucket in 50ms increments for a meaningful distribution shape.

3. Add a mean line: Enable Show Mean = true to draw a reference line at the average. Label the axes with X Axis Label = "Response Time (ms)" and Y Axis Label = "Request Count".

Example: API response time histogram

Bind to an array of P50/P95/P99 response time samples from a monitoring data source. Set Bin Size = 25 ms, enable Show Mean, and color bars conditionally: red when bin range > 500ms, amber 250–500ms, green below 250ms. The resulting histogram immediately shows whether traffic is concentrated in fast or slow buckets.

Box Plot

A box plot (box-and-whisker plot) compresses a distribution into five summary statistics: the minimum, first quartile (Q1), median, third quartile (Q3), and maximum. Whiskers extend to the min and max (or to 1.5× IQR, with points beyond shown as outlier dots). Multiple box plots side by side make group comparisons fast.

Data Format for Box Plot

Unlike a histogram, the box plot expects pre-computed statistics. Each group is one object in the data array:

[ { "label": "Engineering", "min": 72000, "q1": 95000, "median": 115000, "q3": 145000, "max": 220000, "outliers": [260000, 310000] }, { "label": "Sales", "min": 55000, "q1": 70000, "median": 88000, "q3": 110000, "max": 165000 } ]

Tip: Most SQL databases support PERCENTILE_CONT(0.25) WITHIN GROUP (ORDER BY value) to compute quartiles server-side. Return one row per group with the five stats as columns. This avoids loading thousands of raw values into the browser.

Violin Plot

A violin plot is a richer alternative to the box plot: it shows the full kernel density estimate (KDE) of the distribution as a mirrored shape, with optional box plot statistics overlaid in the center. Use it when sample sizes are large enough that the shape of the distribution is meaningful — at least 30–50 data points per group.

Note: Unlike the box plot, violin plots require the raw values array per group because the KDE is computed in the browser. Limit to datasets under ~10,000 points total to avoid layout slowdown. For larger samples, use the box plot with pre-aggregated stats instead.

Events & Exposed State

Examples

Example: Salary band box plot for HR compensation review

Query compensation data aggregated by department into the five-number summary. Render a horizontal box plot (Orientation = horizontal) with Show Outliers = true. Long department names fit naturally on the Y axis in horizontal orientation. Click a box to navigate to a department detail page using the onBoxClick event with a Navigate action.

Example: A/B test metric violin

Load raw conversion-time values for each test variant into a violin plot with two groups (Control, Variant). Enable Show Median Line = true. The width of each violin at a given value shows how many users experienced that conversion time — a wide midsection means most users clustered around the median, a long tail reveals slow outliers. This is far more informative than a bar chart showing only average conversion time.

Related Pages