Basic Charts

The five essential chart types that form the foundation of data visualization. These charts handle the most common use cases: comparing categories, tracking trends, finding correlations, showing composition, and displaying proportions.

Bar Chart

Compare values across categories using rectangular bars. Bar charts excel at ranking items, showing differences between groups, and making magnitude comparisons intuitive. Choose vertical bars for categories with short labels, horizontal bars when labels are long or you have many categories.

Configuration

Parameter	Type	Default	Description
type	string	-	'bar'
x	string	required	Category field
y	string	required	Value field
orientation	'vertical' | 'horizontal'	'vertical'	Bar direction
stacked	boolean	false	Stack bars by color group
barPadding	number	0.2	Padding between bars (0-1)
groupPadding	number	0.1	Padding between groups
colorScheme	string	'schemeCategory10'	Color palette
outline	boolean	false	Add stroke to bars

Basic Example

View Source

type: bar
engine: d3
x: category
y: value
title: Sales by Category
width: 500
height: 300
data:
  source: '[{"category": "Electronics", "value": 450}, {"category": "Clothing", "value": 320}, {"category": "Books", "value": 180}, {"category": "Food", "value": 290}]'

Horizontal Bars

View Source

type: bar
engine: d3
x: category
y: value
orientation: horizontal
title: Top Products
width: 500
height: 300
data:
  source: '[{"category": "Laptop Pro", "value": 850}, {"category": "Wireless Headphones", "value": 620}, {"category": "Smart Watch", "value": 480}, {"category": "Tablet Mini", "value": 390}, {"category": "Phone Case", "value": 210}]'

Stacked Bars

View Source

type: bar
engine: d3
x: quarter
y: revenue
color: region
stacked: true
title: Revenue by Region
colorScheme: schemeTableau10
width: 500
height: 300
data:
  source: '[{"quarter": "Q1", "revenue": 120, "region": "North"}, {"quarter": "Q1", "revenue": 90, "region": "South"}, {"quarter": "Q2", "revenue": 150, "region": "North"}, {"quarter": "Q2", "revenue": 110, "region": "South"}, {"quarter": "Q3", "revenue": 180, "region": "North"}, {"quarter": "Q3", "revenue": 130, "region": "South"}, {"quarter": "Q4", "revenue": 200, "region": "North"}, {"quarter": "Q4", "revenue": 160, "region": "South"}]'

Grouped Bars

View Source

type: bar
engine: d3
x: month
y: sales
color: product
stacked: false
title: Product Comparison
barPadding: 0.1
groupPadding: 0.2
width: 500
height: 300
data:
  source: '[{"month": "Jan", "sales": 80, "product": "Widget"}, {"month": "Jan", "sales": 65, "product": "Gadget"}, {"month": "Feb", "sales": 95, "product": "Widget"}, {"month": "Feb", "sales": 78, "product": "Gadget"}, {"month": "Mar", "sales": 110, "product": "Widget"}, {"month": "Mar", "sales": 92, "product": "Gadget"}]'

Line Chart

Reveal trends and patterns by connecting data points in sequence. Line charts work best for time series data where you want to show change over a continuous interval. Use multiple lines to compare trends across categories, and choose curve styles to emphasize smoothness or show exact step changes.

Configuration

Parameter	Type	Default	Description
type	string	-	'line'
x	string	required	X-axis field (often date)
y	string	required	Y-axis field
curve	'linear' | 'smooth' | 'step'	'linear'	Line interpolation
strokeWidth	number	2	Line thickness
showDots	boolean	true	Show data points
dotRadius	number	3	Point radius
color	string	-	Field for multi-series
colorScheme	string	'schemeCategory10'	Color palette

Basic Example

View Source

type: line
engine: d3
x: date
y: value
title: Daily Trends
curve: smooth
showDots: true
width: 500
height: 300
data:
  source: '[{"date": "2024-01-01", "value": 120}, {"date": "2024-01-02", "value": 145}, {"date": "2024-01-03", "value": 132}, {"date": "2024-01-04", "value": 168}, {"date": "2024-01-05", "value": 155}, {"date": "2024-01-06", "value": 178}, {"date": "2024-01-07", "value": 192}]'

Multi-Series

View Source

type: line
engine: d3
x: month
y: revenue
color: product
title: Product Revenue Trends
strokeWidth: 2.5
curve: smooth
width: 500
height: 300
data:
  source: '[{"month": "Jan", "revenue": 100, "product": "Alpha"}, {"month": "Feb", "revenue": 130, "product": "Alpha"}, {"month": "Mar", "revenue": 145, "product": "Alpha"}, {"month": "Jan", "revenue": 80, "product": "Beta"}, {"month": "Feb", "revenue": 95, "product": "Beta"}, {"month": "Mar", "revenue": 120, "product": "Beta"}]'

Step Line

View Source

type: line
engine: d3
x: timestamp
y: status
curve: step
title: Status Changes
showDots: false
width: 500
height: 300
data:
  source: '[{"timestamp": "09:00", "status": 1}, {"timestamp": "10:00", "status": 1}, {"timestamp": "11:00", "status": 0}, {"timestamp": "12:00", "status": 0}, {"timestamp": "13:00", "status": 1}, {"timestamp": "14:00", "status": 1}, {"timestamp": "15:00", "status": 0}]'

Scatter Chart

Plot individual data points by their x and y values to discover relationships between variables. Scatter charts reveal correlations, clusters, and outliers that other chart types hide. Add size encoding to create bubble charts for three-dimensional comparisons, or use color to distinguish categories within the data.

Configuration

Parameter	Type	Default	Description
type	string	-	'scatter'
x	string	required	X-axis field
y	string	required	Y-axis field
size	string	-	Field for size encoding
radius	number	5	Default point radius
minRadius	number	3	Minimum radius (with size)
maxRadius	number	20	Maximum radius (with size)
opacity	number	0.7	Point opacity
color	string	-	Field for color grouping
colorScheme	string	'schemeCategory10'	Color palette

Basic Example

View Source

type: scatter
engine: d3
x: height
y: weight
title: Height vs Weight
opacity: 0.6
width: 500
height: 300
data:
  source: '[{"height": 165, "weight": 65}, {"height": 170, "weight": 70}, {"height": 175, "weight": 75}, {"height": 180, "weight": 82}, {"height": 168, "weight": 68}, {"height": 172, "weight": 73}, {"height": 178, "weight": 78}, {"height": 182, "weight": 85}, {"height": 169, "weight": 71}, {"height": 176, "weight": 76}]'

Bubble Chart (Size Encoding)

View Source

type: scatter
engine: d3
x: gdp
y: lifeExpectancy
size: population
color: continent
title: Countries by GDP and Life Expectancy
minRadius: 4
maxRadius: 30
width: 550
height: 350
data:
  source: '[{"gdp": 50000, "lifeExpectancy": 78, "population": 330, "continent": "Americas"}, {"gdp": 45000, "lifeExpectancy": 82, "population": 67, "continent": "Europe"}, {"gdp": 12000, "lifeExpectancy": 76, "population": 1400, "continent": "Asia"}, {"gdp": 40000, "lifeExpectancy": 84, "population": 126, "continent": "Asia"}, {"gdp": 42000, "lifeExpectancy": 81, "population": 83, "continent": "Europe"}, {"gdp": 8000, "lifeExpectancy": 72, "population": 210, "continent": "Americas"}]'

Colored Groups

View Source

type: scatter
engine: d3
x: sepalLength
y: sepalWidth
color: species
title: Iris Dataset
colorScheme: schemeSet2
width: 500
height: 300
data:
  source: '[{"sepalLength": 5.1, "sepalWidth": 3.5, "species": "setosa"}, {"sepalLength": 4.9, "sepalWidth": 3.0, "species": "setosa"}, {"sepalLength": 7.0, "sepalWidth": 3.2, "species": "versicolor"}, {"sepalLength": 6.4, "sepalWidth": 3.2, "species": "versicolor"}, {"sepalLength": 6.3, "sepalWidth": 3.3, "species": "virginica"}, {"sepalLength": 5.8, "sepalWidth": 2.7, "species": "virginica"}, {"sepalLength": 5.0, "sepalWidth": 3.4, "species": "setosa"}, {"sepalLength": 6.5, "sepalWidth": 2.8, "species": "versicolor"}, {"sepalLength": 6.7, "sepalWidth": 3.0, "species": "virginica"}]'

Brushable Selection

Enable brush selection to highlight and filter points interactively. Use type: brushable-scatter or add brush interactions to any scatter chart:

View Source

type: brushable-scatter
engine: d3
x: x
y: y
title: Drag to Select Points
width: 500
height: 300
data:
  source: '[{"x": 10, "y": 20}, {"x": 15, "y": 35}, {"x": 20, "y": 25}, {"x": 25, "y": 45}, {"x": 30, "y": 30}, {"x": 35, "y": 55}, {"x": 40, "y": 40}, {"x": 45, "y": 60}, {"x": 50, "y": 50}]'

Area Chart

Emphasize magnitude and volume by filling the space beneath a line. Area charts convey the weight of data more powerfully than lines alone. Stack multiple areas to show how parts contribute to a whole over time, or overlay them with transparency to compare trends while preserving individual shapes.

Configuration

Parameter	Type	Default	Description
type	string	-	'area'
x	string	required	X-axis field
y	string	required	Y-axis field
curve	'linear' | 'smooth' | 'step'	'linear'	Line interpolation
stacked	boolean	false	Stack areas
opacity	number	0.7	Fill opacity
showLine	boolean	true	Show line on top
color	string	-	Field for multi-series
colorScheme	string	'schemeCategory10'	Color palette

Basic Example

View Source

type: area
engine: d3
x: date
y: value
title: Cumulative Growth
opacity: 0.5
curve: smooth
width: 500
height: 300
data:
  source: '[{"date": "2024-01", "value": 100}, {"date": "2024-02", "value": 145}, {"date": "2024-03", "value": 178}, {"date": "2024-04", "value": 210}, {"date": "2024-05", "value": 265}, {"date": "2024-06", "value": 320}]'

Stacked Areas

View Source

type: area
engine: d3
x: month
y: sales
color: category
stacked: true
title: Sales Breakdown
colorScheme: schemeTableau10
width: 500
height: 300
data:
  source: '[{"month": "Jan", "sales": 50, "category": "Online"}, {"month": "Jan", "sales": 30, "category": "Store"}, {"month": "Feb", "sales": 65, "category": "Online"}, {"month": "Feb", "sales": 35, "category": "Store"}, {"month": "Mar", "sales": 80, "category": "Online"}, {"month": "Mar", "sales": 40, "category": "Store"}, {"month": "Apr", "sales": 95, "category": "Online"}, {"month": "Apr", "sales": 45, "category": "Store"}]'

Multi-Series (Overlapping)

View Source

type: area
engine: d3
x: year
y: emissions
color: country
stacked: false
opacity: 0.4
title: Emissions by Country
width: 500
height: 300
data:
  source: '[{"year": "2020", "emissions": 5000, "country": "USA"}, {"year": "2021", "emissions": 4800, "country": "USA"}, {"year": "2022", "emissions": 4600, "country": "USA"}, {"year": "2020", "emissions": 10000, "country": "China"}, {"year": "2021", "emissions": 10500, "country": "China"}, {"year": "2022", "emissions": 11000, "country": "China"}, {"year": "2020", "emissions": 3000, "country": "EU"}, {"year": "2021", "emissions": 2900, "country": "EU"}, {"year": "2022", "emissions": 2800, "country": "EU"}]'

Pie Chart

Display parts of a whole as angular slices. Pie charts work best with 2-6 categories where you want to emphasize proportions rather than exact values. Set innerRadius above 0.4 to create a donut chart, which adds visual interest and provides space for summary statistics in the center.

Configuration

Parameter	Type	Default	Description
type	string	-	'pie'
x	string	required	Label field
y	string	required	Value field
innerRadius	number	0	Inner radius ratio (0-1). Use 0.5+ for donut
padAngle	number	0.02	Gap between slices
cornerRadius	number	3	Rounded corners
showLabels	boolean	false	Show labels on slices
labelFormat	'value' | 'percent' | 'label'	'percent'	Label format
colorScheme	string	'schemeCategory10'	Color palette

Basic Pie

View Source

type: pie
engine: d3
x: category
y: value
title: Market Share
showLabels: true
labelFormat: percent
width: 400
height: 400
data:
  source: '[{"category": "Product A", "value": 35}, {"category": "Product B", "value": 28}, {"category": "Product C", "value": 22}, {"category": "Product D", "value": 15}]'

Donut Chart

View Source

type: pie
engine: d3
x: status
y: count
innerRadius: 0.5
title: Task Status
showLabels: true
padAngle: 0.03
width: 400
height: 400
data:
  source: '[{"status": "Complete", "count": 45}, {"status": "In Progress", "count": 30}, {"status": "Pending", "count": 15}, {"status": "Blocked", "count": 10}]'

Styled Donut

View Source

type: pie
engine: d3
x: product
y: revenue
innerRadius: 0.6
cornerRadius: 5
padAngle: 0.02
colorScheme: schemeTableau10
title: Revenue Distribution
width: 400
height: 400
data:
  source: '[{"product": "Software", "revenue": 450}, {"product": "Services", "revenue": 320}, {"product": "Hardware", "revenue": 180}, {"product": "Support", "revenue": 120}]'

---

Funnel Chart

Visualize conversion flows and drop-off rates through sequential stages. Funnel charts represent decreasing quantities at each stage, making them ideal for sales pipelines, user acquisition funnels, or any process with progressive filtering.

Configuration

Parameter	Type	Default	Description
type	string	-	'funnel'
x	string	'stage'	Stage/category field
y	string	'value'	Value field
showLabels	boolean	true	Show stage labels
showPercent	boolean	true	Show percentage of initial value
gapRatio	number	0.02	Gap between stages (0-1)

Basic Example

View Source

type: funnel
engine: d3
x: stage
y: value
showLabels: true
showPercent: true
title: Sales Funnel
width: 500
height: 400
data:
  source: '[{"stage": "Visitors", "value": 10000}, {"stage": "Leads", "value": 5000}, {"stage": "Prospects", "value": 2500}, {"stage": "Customers", "value": 1000}, {"stage": "Repeat", "value": 400}]'

---

Gantt Chart

Display project timelines with tasks as horizontal bars spanning from start to end times. Gantt charts excel at showing task duration, overlap, and scheduling for project management.

Configuration

Parameter	Type	Default	Description
type	string	-	'gantt'
task	string	'task'	Task name field
start	string	'start'	Start time field
end	string	'end'	End time field
color	string	-	Optional field for color grouping
showGrid	boolean	true	Show vertical grid lines

Basic Example

View Source

type: gantt
engine: d3
task: task
start: start
end: end
color: status
showGrid: true
title: Project Timeline
width: 600
height: 300
data:
  source: '[{"task": "Planning", "start": 0, "end": 3, "status": "complete"}, {"task": "Design", "start": 2, "end": 5, "status": "complete"}, {"task": "Development", "start": 4, "end": 10, "status": "active"}, {"task": "Testing", "start": 8, "end": 12, "status": "pending"}, {"task": "Deployment", "start": 11, "end": 13, "status": "pending"}]'

---

Type Aliases

Primary	Aliases
bar	barchart, bar-chart, column, basic/bar
line	linechart, line-chart, basic/line
scatter	scatterplot, scatter-plot, dot, basic/scatter
area	areachart, area-chart, basic/area
pie	piechart, pie-chart, donut, doughnut, basic/pie
funnel	funnel-chart, conversion-funnel, basic/funnel
gantt	gantt-chart, timeline, project-timeline, basic/gantt