@texuli/charts

Charts gallery

Interactive examples for every chart family, each with its data contract. Fictional Harbor Notes metrics only. Theme tokens drive light and dark; nothing leaves this origin.

Cartesian

Open Cartesian page

Line, area, bar, stacked bar and combo charts on a shared series model.

Import @texuli/charts/cartesian· Components: LineChart, AreaChart, BarChart, StackedBarChart, ComboChart

Monthly new and returning Harbor Notes accounts (fictional counts).

Data contract

FieldTypeRequiredNotes
titlestringyes—
descriptionstringyesAccessible long description
seriesCartesianSeries[]yes{ id, label, points: { x, y }[] }
mode'light' | 'dark'—Optional palette override
renderer'auto' | 'svg' | 'canvas'—Dense series may use canvas
interactiveboolean—Enables brush/zoom/select hooks

Cartesian examples

Account growth

New and returning Harbor Notes accounts each month.

Account growth

Accounts over time

Account additions by month as stacked areas.

Accounts over time

Monthly accounts

Grouped new and returning accounts.

Monthly accounts

Account mix

Monthly accounts stacked by type.

Account mix

Accounts and retention

New accounts as bars and returning accounts as a line.

Accounts and retention

Part-whole

Open Part-whole page

Pie, donut, treemap and sunburst for categorical and hierarchical shares.

Import @texuli/charts/part-whole· Components: PieChart, DonutChart, TreemapChart, SunburstChart

Quarterly revenue mix in millions (fictional Example Co.).

Data contract

FieldTypeRequiredNotes
titlestringyes—
descriptionstringyes—
dataPartWholeDatum[]—Flat slices: { id, label, value } — pie and donut
rootPartWholeTree—Hierarchy: { id, label, value? | children[] } — treemap and sunburst
labelsPartWholeTableLabels—Table chrome copy

Part-whole examples

Revenue mix

Platform is the largest share, followed by services, support and other.

  • Platform
  • Services
  • Support
  • Other
Open data table
Revenue mix
CategoryValue
Platform42
Services28
Support18
Other12

Revenue share

The same revenue mix with the total in the center.

  • Platform
  • Services
  • Support
  • Other
Open data table
Revenue share
CategoryValue
Platform42
Services28
Support18
Other12

Revenue by team

Area encodes each product and service revenue amount.

Revenue by teamArea encodes each product and service revenue amount.
  • Platform
  • Support
  • Implementation
  • Training
Open data table
Revenue by team
CategoryValue
Harbor Notes100
Product60
Platform42
Support18
Services40
Implementation24
Training16

Revenue hierarchy

Inner ring groups product and services; outer ring shows their parts.

Revenue hierarchyInner ring groups product and services; outer ring shows their parts.
  • Product
  • Platform
  • Support
  • Services
  • Implementation
  • Training
Open data table
Revenue hierarchy
CategoryValue
Harbor Notes100
Product60
Platform42
Support18
Services40
Implementation24
Training16

Compact

Open Compact page

Sparklines, bullets, gauges and progress rings for dense dashboards.

Import @texuli/charts/compact· Components: Sparkline, BulletChart, Gauge, ProgressRing

Weekly signups, quarterly revenue target and service health (fictional).

Data contract

FieldTypeRequiredNotes
labelstringyes—
valuesreadonly number[]—Sparkline sequence
valuenumber—Bullet, gauge, ring current value
maxnumber—Bullet and ring scale
targetnumber—Bullet target marker
rangesnumber[]—Bullet qualitative bands
thresholdsnumber[]—Gauge band edges

Compact examples

Weekly signups

Weekly signups8 values; increased from 18 to 34. Period: eight weeks.
View data table
Weekly signups — eight weeks
PointValue
118
221
319
425
527
623
731
834

Quarterly target

Quarterly revenue74 of 100; target 80.
View data table
Quarterly revenue
MeasureValue
Current74
Maximum100
Target80

Service health

Service health86 of 100; Excellent.86Excellent
View data table
Service health
MeasureValue
Current86
Minimum0
Maximum100
RangeExcellent

Project completion

Project completion7 of 10; 70%.70%
View data table
Project completion
MeasureValue
Complete7
Total10
Percent70%

Matrix

Open Matrix page

Heatmap, scatter and bubble plots for two- and three-dimensional metrics.

Import @texuli/charts/matrix· Components: HeatmapChart, ScatterChart, BubbleChart

Squad effort by weekday; latency vs throughput; service footprint (fictional).

Data contract

FieldTypeRequiredNotes
cellsHeatmapCell[]—{ x, y, value } categorical axes
pointsScatterPoint[]—{ id, label, x, y, r?, seriesId? }
series{ id, label }[]—Legend groups for scatter/bubble
titlestringyes—
descriptionstringyes—

Matrix examples

Squad effort by day

Relative story points by squad and weekday. Fictional planning data.

View data table
Squad effort by day data
RowColumnValue
DesignMon2
DesignTue5
DesignWed3
BuildMon4
BuildTue7
BuildWed6
ReviewMon1
ReviewTue2
ReviewWed8

Latency versus throughput

Desks by requests per minute and p95 latency.

View data table
Latency versus throughput data
PointSeriesXY
North deskon-site1240
East deskon-site2822
Remote Aremote1855
Remote Bremote3548
Labon-site818

Service footprint

Services by error rate (x), traffic (y) and instance count (size).

View data table
Service footprint data
PointSeriesXYSize
Alphacore10304
Betacore25459
Gammaedge40206
Deltaedge325512

Flow

Open Flow page

Funnel, sankey and network graphs for conversion and collaboration flows.

Import @texuli/charts/flow· Components: FunnelChart, SankeyChart, NetworkGraph

Signup funnel and acquisition flow for Harbor Notes (illustrative).

Data contract

FieldTypeRequiredNotes
steps{ id, label, value }[]—Funnel ordered stages
nodes{ id, label, value? }[]—Sankey / network nodes
links{ source, target, value }[]—Directed edges between node ids
titlestringyes—
descriptionstringyes—

Flow examples

Signup funnel

Harbor Notes signup flow from visit to paid account.

Signup funnelHarbor Notes signup flow from visit to paid account.Visit: 1,200 (100%)Trial: 760 (63.3%)Account: 420 (35%)Paid: 190 (15.8%)
View data table
Signup funnel
StepCountConversion
Visit1,200100%
Trial76063.3%
Account42035%
Paid19015.8%

Acquisition flow

Website and referrals flow through trials to paid accounts.

Acquisition flowWebsite and referrals flow through trials to paid accounts.WebsiteTrialPaidReferral
View data table
Acquisition flow
FromToValue
WebsiteTrial760
TrialPaid190
ReferralTrial240

Team network

Connections between four fictional Harbor teammates.

Team networkConnections between four fictional Harbor teammates.AdaLinSamRen
View data table
Team network
FromToValue
AdaLin3
AdaSam2
LinRen1
SamRen2

Geo

Open Geo page

Offline choropleth and point maps on bundled schematic tiles (not live GIS).

Import @texuli/charts/geo· Components: GeoMap, GeoPointMap

Revenue by world region and team activity on Harbor Bay districts (schematic).

Data contract

FieldTypeRequiredNotes
dataRecord<string, number | null>—Region id → value; null uses patterned missing fill
pointsGeoPointDatum[]—{ id, label, regionId, value, offset? }
shapeGeoShape—WORLD_TILES or REGION_TILES
titlestringyes—
descriptionstringyes—

Geo examples

Revenue by world region

Revenue in millions on schematic world tiles; missing values use a patterned fill. Not precise borders.

Revenue by world regionRevenue in millions on schematic world tiles; missing values use a patterned fill. Not precise borders.North America: 68Northern Europe: 46Eastern Europe: 28Central Asia: 19East Asia: 79Central America & Caribbean: 24Western Europe: 62Southern Europe: 39Middle East: 31South Asia: 56South America: 35North Africa: No dataSoutheast Asia: 52Sub-Saharan Africa: 18Oceania: 42
View data table
Revenue by world region
RegionValue
North America68
Northern Europe46
Eastern Europe28
Central Asia19
East Asia79
Central America & Caribbean24
Western Europe62
Southern Europe39
Middle East31
South Asia56
South America35
North AfricaNo data
Southeast Asia52
Sub-Saharan Africa18
Oceania42

Team activity by district

Marker size shows quarterly activity across fictional Harbor Bay districts.

Team activity by districtMarker size shows quarterly activity across fictional Harbor Bay districts.
View data table
Team activity by district
PointLocationValue
Harbor teamHarbor Point31
Quay teamEast Quay18
Ridge teamNorth Ridge25
Town teamOld Town39
Mill teamMill District12
Tide teamTidewater21

Interaction

Open Interaction page

Legend toggles, keyboard plot focus, tooltips, brush/zoom and data table.

Import @texuli/charts/interaction· Components: InteractivePlot, Legend, ChartTable, TableToggle

Weekly signups and trials with live selection announcements (fictional).

Data contract

FieldTypeRequiredNotes
seriesPlotSeries[]yes{ id, label, color, points: { x, y, xValue, yValue }[] }
formattersChartFormatters—x/y label formatters
hiddenReadonlySet<string>—Legend-hidden series ids
onselect / onbrush / onzoomcallbacks—Optional host hooks

Interaction examples

Use arrow keys to move between points, Page Up and Page Down to switch series, Enter to select. Shift-drag to brush; Ctrl-wheel or plus and minus to zoom when enabled.

Selection: None yet

Full range

Canvas renderer

Open Canvas renderer page

Dense cartesian series rendered on canvas with the same contracts as SVG charts.

Import @texuli/charts/cartesian· Components: LineChart, AreaChart

Deterministic daily activity curve (512 samples) on canvas.

Data contract

FieldTypeRequiredNotes
seriesCartesianSeries[]yes—
renderer'canvas' | 'auto'yesForce canvas for dense samples
titlestringyes—
descriptionstringyes—

Canvas renderer examples

Daily activity (canvas)

Five hundred twelve deterministic daily activity samples on the canvas renderer.

Daily activity (canvas)

Activity area (canvas)

The same samples as a filled canvas area chart.

Activity area (canvas)