Chart Types

Graphic Walker supports a variety of chart types through its geoms configuration. Each geometry type maps data to a different visual representation.

Generic Charts

These charts use the default 'generic' coordinate system.

Geom Type	Name	Best For
`'bar'`	Bar Chart	Comparing categories, showing distributions
`'line'`	Line Chart	Trends over time, continuous data
`'area'`	Area Chart	Cumulative totals, part-to-whole over time
`'point'`	Scatter Plot	Correlations between two measures
`'circle'`	Circle Plot	Same as scatter but with filled circles
`'tick'`	Tick Plot	Distribution of values along an axis
`'rect'`	Heatmap	Two-dimensional distributions, density
`'arc'`	Pie / Donut Chart	Part-to-whole proportions
`'boxplot'`	Box Plot	Statistical distributions (quartiles, outliers)
`'table'`	Data Table	Raw data display within the chart view

Geographic Charts

These charts require coordSystem: 'geographic'.

Geom Type	Name	Best For
`'poi'`	Point Map	Location-based data points
`'choropleth'`	Choropleth Map	Regional comparisons using colored areas

Visual Encoding Channels

Each chart type uses visual encoding channels to map data fields to visual properties:

Channel	Description	Applicable Types
`columns`	X-axis position	All generic charts
`rows`	Y-axis position	All generic charts
`color`	Color hue	All charts
`opacity`	Transparency	All charts
`size`	Element size	point, circle
`shape`	Element shape	point
`theta`	Angle	arc (pie/donut)
`radius`	Radius	arc (donut hole)
`longitude`	Map longitude	poi
`latitude`	Map latitude	poi
`geoId`	Geographic region ID	choropleth
`details`	Detail grouping (no visual encoding)	All charts
`text`	Text labels	All charts
`filters`	Row-level filtering	All charts

Aggregation

When defaultAggregated is true (the default), measure fields are aggregated automatically. Available aggregation functions:

Aggregator	Description
`sum`	Sum of values
`mean`	Arithmetic mean
`count`	Number of records
`min`	Minimum value
`max`	Maximum value
`median`	Median value
`variance`	Statistical variance
`stdev`	Standard deviation
`distinctCount`	Count of unique values

Stack Modes

Stack modes control how overlapping marks are arranged. Set via layout.stack:

Mode	Description
`'none'`	No stacking — marks overlap
`'stack'`	Stack marks on top of each other
`'normalize'`	Stack and normalize to 100%
`'zero'`	Stack from zero baseline
`'center'`	Stack centered (streamgraph)

Faceting

Split a visualization into multiple panels by placing dimension fields in rows or columns alongside measure fields. Graphic Walker automatically creates a faceted (small multiples) layout.

For example, placing Region in columns and Sales in rows with Month also in columns creates a row of charts — one per region — each showing sales over time.

Size Modes

Control chart sizing via layout.size.mode:

Mode	Behavior
`'auto'`	Automatically sized based on content
`'fixed'`	Uses the specified `width` and `height` values
`'full'`	Fills the parent container

Configuration Example

const chart: IChart = {
  visId: 'example',
  name: 'Sales Trend',
  encodings: {
    dimensions: [],
    measures: [],
    rows: [{ fid: 'sales', name: 'Sales', analyticType: 'measure', semanticType: 'quantitative' }],
    columns: [{ fid: 'month', name: 'Month', analyticType: 'dimension', semanticType: 'temporal' }],
    color: [{ fid: 'region', name: 'Region', analyticType: 'dimension', semanticType: 'nominal' }],
    opacity: [],
    size: [],
    shape: [],
    theta: [],
    radius: [],
    longitude: [],
    latitude: [],
    geoId: [],
    details: [],
    filters: [],
    text: [],
  },
  config: {
    defaultAggregated: true,
    geoms: ['line'],
    coordSystem: 'generic',
    limit: -1,
  },
  layout: {
    showTableSummary: false,
    stack: 'none',
    showActions: false,
    interactiveScale: true,
    zeroScale: true,
    size: { mode: 'auto', width: 800, height: 400 },
    format: {},
    resolve: {},
  },
};