Custom Graph Reference

A complete list of Geometries and Statistics available in Custom Graph. Click the help button (?) in the layer settings for details on each item.

Geometry

Geometry–aesthetic compatibility

Each geometry accepts a specific set of aesthetics — visual mappings such as position, color, and size. Mapping an unsupported aesthetic to a geometry has no effect.

R = required, ○ = optional (triggers additional behavior when present), • = supported.

• Required aesthetics must be mapped to a column or provided by a statistic.
• color vs fill: Bar and Tile use fill for their interior color, not color. Area accepts both — color for the outline and fill for the interior. Ribbon draws no outline; color sets its fill color, and Ribbon's fill is only used with a threshold color scale.
• stroke: Only Point supports stroke, which sets a separate outline color.
• ymin / ymax: Line draws an interval band when both are present. Ribbon and Errorbar require them.

Statistics

Statistics parameters

Each Statistic accepts a params object in the stats array passed to tabs.addGraphLayer / tabs.updateGraphLayer. The tables below list the parameter name, TypeScript type, default value, and a short description for every Statistic.

await window.midas.tabs.addGraphLayer('tab_001', {
  geom: { type: 'point' },
  stats: [
    { type: 'smooth', params: { method: 'loess', span: 0.5, interval: 'confidence' } }
  ],
  aes: { x: 'weight', y: 'mpg' }
});

In the type column: A | B means either value is accepted, T[] means an array of T, and a trailing ? on a field name (e.g. p?) marks it as optional. For the full behavior of each Statistic — assumptions, limits, and worked examples — see Custom Graph.

Identity (No transformation)

No parameters.

Bin (Histogram)

Time Bin (Datetime Histogram)

Smooth (Regression)

Count (Aggregation)

No parameters.

Density (KDE)

Summary (Aggregation)

Survival (Kaplan-Meier)

X Mean

X Median

Y Mean

Cumulative Sum (Pareto)

Sort (Pareto)

ECDF (Empirical CDF)

No parameters.

QQ (Normal Q-Q Plot)

Transform (Linear)

Palettes

Available values for paletteId in the color / fill channel of layers[].scales. See Agent API for how to set palettes via API.

Categorical

For coloring by categorical variables. Use with scaleType: 'categorical'.

Default: midas-default.

Sequential

For continuous or ordinal variables. Use with scaleType: 'sequential'.

Also usable with scaleType: 'categorical' and 'threshold'. In those modes, one color per category or threshold region is sampled at equal intervals across the full palette range.

Default: blues. Viridis, Plasma, Inferno, and Magma are perceptually uniform and accommodate color vision diversity.

Diverging

For variables that diverge in both directions from a center value. Use with scaleType: 'diverging'.

Also usable with scaleType: 'threshold'. In that mode, one color per threshold region is sampled at equal intervals across the full palette range.

Default: rdbu.

scaleType and paletteId compatibility

With threshold, you can also specify colors directly via thresholdColors. When thresholdColors is set, it takes precedence; when omitted, one color per threshold region is sampled at equal intervals across the paletteId palette.

In the Graph Builder UI, switching the scale type automatically resets an incompatible palette to that scale type's default, and the graph keeps rendering. When an incompatible paletteId is set directly via the API, the graph fails to render at draw time.

Aesthetic fixed values

In the Agent API, aesthetic properties normally map a column to a visual channel. To use a constant value instead of a column mapping:

• Fixed color: Set color, fill, or stroke to { fixedColor: '#FF0000' } (any CSS color string)
• Fixed size: Set size to a positive number (e.g., 5). Zero or negative values are ignored with a warning
• Fixed alpha: Set alpha to a number between 0 (fully transparent) and 1 (fully opaque). Out-of-range values are ignored with a warning

await window.midas.tabs.addGraphLayer(tabId, {
  geom: { type: 'point' },
  aes: { x: 'weight', y: 'height', color: { fixedColor: '#3366CC' }, size: 8, alpha: 0.5 }
});

Multiple layers with different fixed colors

Add each series as a separate layer with its own fixedColor:

// Layer 1: actual values in blue
await window.midas.tabs.addGraphLayer(tabId, {
  geom: { type: 'line' },
  aes: { x: 'date', y: 'actual', color: { fixedColor: '#3366CC' } }
});

// Layer 2: predicted values in red
await window.midas.tabs.addGraphLayer(tabId, {
  geom: { type: 'line' },
  aes: { x: 'date', y: 'predicted', color: { fixedColor: '#CC3333' } }
});

Alternative: categorical color mapping

When data is in long format (one row per observation with a grouping column), map the grouping column to color instead of using fixedColor. The palette assigns a distinct color to each group automatically.

// Long format: each row has a "series" column ("actual" or "predicted")
await window.midas.tabs.addGraphLayer(tabId, {
  geom: { type: 'line' },
  aes: { x: 'date', y: 'value', color: 'series' }
});

This approach works well when the number of series is dynamic or when you want consistent palette colors across multiple graphs.

Using labels with statistics

When a layer uses a statistic (Count, Summary, Bin, etc.), the stat replaces original column values with aggregated results. An aes.label column mapping cannot reference the original data after transformation. To display stat-computed values as labels, set geom.defaults.labelContent instead of aes.label.

labelContent references stat output variables with the $ prefix:

// Show mean values as labels on a summary chart
await window.midas.tabs.addGraphLayer(tabId, {
  geom: {
    type: 'label',
    defaults: {
      labelContent: { field: '$y', format: '.1f' }
    }
  },
  stats: [{ type: 'summary', params: { outputs: [{ fun: 'mean', to: 'y' }] } }],
  aes: { x: 'category', y: 'value' }
});

The labelContent object accepts these properties:

Coordinates

The coordinate system is a graph-level setting, specified in the coordinates field of tabs.configureGraph or reports.addGraph. Available values:

• 'cartesian' (default) — Standard Cartesian coordinates
• 'flipped' — Swaps X and Y axes. Useful for horizontal bar charts with long category labels

In the GUI, this corresponds to the Coordinate System section in Graph Builder. See Custom Graph: Flipping Axes for a visual example.

scales.x / scales.y in flipped coordinates

In flipped coordinates, aes.y data appears on the physical X axis (horizontal) and aes.x data on the physical Y axis (vertical). Which axis a scales.x / scales.y setting applies to depends on the setting:

• Scale type and tick settings (type, domain, ticks, zoomEnabled) apply to the physical screen axes: scales.x controls the horizontal axis and scales.y the vertical axis, even when flipped
• title follows the data axis: scales.x.title labels the axis showing aes.x data (the vertical axis when flipped), and scales.y.title labels the axis showing aes.y data (the horizontal axis when flipped)

// Horizontal bar chart: aes.x mapped to categories, aes.y to values
await window.midas.tabs.configureGraph(tabId, {
  coordinates: 'flipped',
  scales: {
    x: { title: 'Product' },      // axis for aes.x data — vertical when flipped
    y: { title: 'Sales (USD)' }   // axis for aes.y data — horizontal when flipped
  }
});

The secondary Y axis (scales.y2) is disabled in flipped coordinates.

See also

• Advanced Graph Creation - Custom Graph usage and tutorial
• Creating Graphs - Graph Builder basics

Also available as a Markdown file.