Skip to main content

​
Histogram

The Histogram component automatically bins continuous data and displays the frequency distribution, making it ideal for analyzing data distributions and identifying patterns.

​
Props

​
Data Props

​
data
Query | array
required
Query result or array of objects containing the data to visualize
​
x
string
required
Column name containing the continuous values to bin and display

​
Formatting Props

​
xFmt
string
Format string for x-axis values (bin labels)

​
Bar Style Props

​
fillColor
string
Fill color for histogram bars (hex, rgb, or theme color name)
​
fillOpacity
number
Opacity of bar fill (0-1)

​
Chart Layout Props

​
title
string
Chart title displayed at the top
​
subtitle
string
Chart subtitle displayed below the title
​
legend
boolean
default:false
Whether to show the legend
​
chartAreaHeight
number
Height of the chart area in pixels

​
Axis Props

​
xAxisTitle
string | boolean
Title for x-axis. Use true to use column name
​
yAxisTitle
string | boolean
Title for y-axis (typically “Frequency” or “Count”)
​
xGridlines
boolean
Show vertical gridlines
​
yGridlines
boolean
Show horizontal gridlines
​
xAxisLabels
boolean
Show labels on x-axis
​
yAxisLabels
boolean
Show labels on y-axis
​
xBaseline
boolean
Show x-axis baseline
​
yBaseline
boolean
Show y-axis baseline
​
xTickMarks
boolean
Show tick marks on x-axis
​
yTickMarks
boolean
Show tick marks on y-axis

​
Axis Scale Props

​
yMin
number
default:0
Minimum value for y-axis
​
yMax
number
Maximum value for y-axis

​
Color Props

​
colorPalette
string | array
default:"default"
Color palette name or array of colors

​
Behavior Props

​
connectGroup
string
Connect charts for synchronized interactions

​
Advanced Props

​
echartsOptions
object
Custom ECharts configuration object
​
seriesOptions
object
Custom series configuration
​
printEchartsConfig
boolean
default:false
Print ECharts config to console
​
renderer
string
Renderer type: ‘canvas’ | ‘svg’
​
downloadableData
boolean
Enable data download
​
downloadableImage
boolean
Enable image download
​
emptySet
string
Empty data behavior: ‘pass’ | ‘warn’ | ‘error’
​
emptyMessage
string
Custom empty data message
​
leftPadding
number
Left padding for chart area
​
rightPadding
number
Right padding for chart area

​
Examples

​
Basic Histogram

```sql order_values
select order_total
from orders


### Histogram with Custom Styling

```markdown
<Histogram 
  data={order_values} 
  x="order_total"
  title="Distribution of Order Values"
  fillColor="primary"
  fillOpacity=0.8
  xFmt="usd"
  xAxisTitle="Order Total"
  yAxisTitle="Number of Orders"
/>

​
Histogram with Gridlines

<Histogram 
  data={customer_ages} 
  x="age"
  title="Customer Age Distribution"
  yGridlines="true"
  xAxisTitle="Age"
  yAxisTitle="Count"
/>

​
Formatted Values

```sql response_times
select response_time_ms
from api_logs


### Custom Height

```markdown
<Histogram 
  data={order_values} 
  x="order_total"
  chartAreaHeight=400
  title="Order Value Distribution"
  subtitle="Last 30 days"
  xFmt="usd0"
/>

Build docs developers (and LLMs) love

Get started for freeTalk to us