Skip to main content

Chart Mode

modeConfig.chart owns the full content area as a chart. Use it when the visualization itself is the primary surface, not a small field renderer. For inline composition bars, see compositionBar vs Chart Mode.

Five series types are supported: bar, line, area, pie, and donut. Several options (color, lineThickness, showDots, areaGradient, donutInnerRadiusRatio) can be set at the top-level chart config as a default, or overridden per series.

Shared Behavior​

Search, static filtering, pagination, actions, and gestures work the same as other modes — see the reference pages:

Core Examples​

Bar Chart​

Use bar charts for direct comparisons across categories.

A vertical bar chart with two series, grid lines, and a legend.

JanFebMarApr
Revenue
Visits
modeConfig: {
  chart: {
    xAxis: 'month',
    height: 320,
    series: [
      { key: 'revenue', label: 'Revenue', type: 'bar' },
      { key: 'visits', label: 'Visits', type: 'bar' },
    ],
  },
}

Line Chart​

Use line charts when the main story is the change over time.

A multi-series line chart with data points enabled.

JanFebMarApr
Revenue
Visits
modeConfig: {
  chart: {
    xAxis: 'month',
    height: 320,
    showDots: true,
    series: [
      { key: 'revenue', label: 'Revenue', type: 'line' },
      { key: 'visits', label: 'Visits', type: 'line' },
    ],
  },
}

Area Chart​

Use area charts when you want the same trend view with more visual weight.

A multi-series area chart with gradient fills.

JanFebMarApr
Revenue
Visits
modeConfig: {
  chart: {
    xAxis: 'month',
    height: 320,
    areaGradient: true,
    series: [
      { key: 'revenue', label: 'Revenue', type: 'area' },
      { key: 'visits', label: 'Visits', type: 'area' },
    ],
  },
}

Pie Chart​

Use pie charts when a single category breakdown is easier to read than a cartesian chart.

A single polar series with category labels and a visible legend.

Product
Support
Services
Other
modeConfig: {
  chart: {
    xAxis: 'segment',
    height: 320,
    showGrid: false,
    series: [
      { key: 'value', label: 'Share', type: 'pie' },
    ],
  },
}

Donut Chart​

Use donut charts when you want the same category breakdown with more center breathing room.

The same polar data rendered as a donut with a custom inner radius.

Desktop
Tablet
Mobile
modeConfig: {
  chart: {
    xAxis: 'segment',
    height: 320,
    showGrid: false,
    donutInnerRadiusRatio: 0.68,
    series: [
      { key: 'value', label: 'Share', type: 'donut' },
    ],
  },
}

See Also​