Skip to main content

Sparkline Column

PRO
Pro preview

This feature is part of FD Components Pro, which is documented as a preview and is not publicly available yet. See Editions and Availability.

FdcSparklineColumn is a Pro read-only visual column for compact inline charts. It can build a sparkline from multiple numeric fields or from a single array-style field.

Sparkline column sample
Loading FDC sample…
FdcGrid(
  dataSet: trendRows,
  options: const FdcGridOptions(readOnly: true),
  columns: const [
    FdcTextColumn(fieldName: 'account', label: 'Ticker', width: 100),
    FdcSparklineColumn(
      label: 'Line',
      width: 190,
      type: FdcSparklineType.line,
      highlightMin: true,
      highlightMax: true,
      highlightLast: true,
      fields: [
        FdcSparklineField(
          fieldName: 'monthly_trend',
          type: FdcSparklineFieldType.array,
        ),
      ],
    ),
    FdcSparklineColumn(
      label: 'Area',
      width: 190,
      type: FdcSparklineType.area,
      fields: [
        FdcSparklineField(
          fieldName: 'monthly_trend',
          type: FdcSparklineFieldType.array,
        ),
      ],
    ),
    FdcSparklineColumn(
      label: 'Dots',
      width: 170,
      type: FdcSparklineType.dots,
      fields: [
        FdcSparklineField(
          fieldName: 'velocity_trend',
          type: FdcSparklineFieldType.array,
        ),
      ],
    ),
    FdcSparklineColumn(
      label: 'Vertical bars',
      width: 170,
      type: FdcSparklineType.barVertical,
      includeZero: true,
      fields: [
        FdcSparklineField(fieldName: 'q1', label: 'Q1'),
        FdcSparklineField(fieldName: 'q2', label: 'Q2'),
        FdcSparklineField(fieldName: 'q3', label: 'Q3'),
        FdcSparklineField(fieldName: 'q4', label: 'Q4'),
      ],
    ),
    FdcSparklineColumn(
      label: 'Horizontal bars',
      width: 180,
      type: FdcSparklineType.barHorizontal,
      includeZero: true,
      fields: [
        FdcSparklineField(fieldName: 'q1', label: 'Q1'),
        FdcSparklineField(fieldName: 'q2', label: 'Q2'),
        FdcSparklineField(fieldName: 'q3', label: 'Q3'),
        FdcSparklineField(fieldName: 'q4', label: 'Q4'),
      ],
    ),
  ],
);

Key characteristics​

  • Pro-only column type.
  • Read-only by design.
  • Supports line, area, barVertical, barHorizontal, and dots sparkline types.
  • Supports array-backed and multi-field series definitions.
  • Supports point highlighting, shared or automatic value domains, zero-line support, tooltip customization, and accessibility labels.
  • Sorting and header filtering are intentionally disabled because each cell represents a numeric series rather than one scalar value.

Example​

FdcSparklineColumn(
  type: FdcSparklineType.line,
  highlightMin: true,
  highlightMax: true,
  fields: const [
    FdcSparklineField(
      fieldName: 'monthly_trend',
      type: FdcSparklineFieldType.array,
    ),
  ],
)

The sample places every sparkline type directly in the grid so their behavior can be compared side by side. Line, area, and dots use 12-month stock-price-style series with visible rallies, pullbacks, and recoveries; vertical and horizontal bars use quarterly values.

Value domain and scale​

By default, the sparkline derives its value domain automatically from the row series. For comparisons across rows, set fixed bounds so every chart uses the same visual scale:

FdcSparklineColumn(
  fields: salesFields,
  min: 0,
  max: 100000,
  includeZero: true,
  showZeroLine: true,
)

Omit min and max when each row should scale automatically to its own values. Use fixed bounds when the visual height of a rise or drop must be directly comparable between rows.

Tooltips and accessibility​

Tooltips are enabled by default. Use tooltipBuilder when the default numeric tooltip needs domain-specific text such as currency, units, periods, or business labels.

Use semanticsLabelBuilder to provide an accessible text description of the chart series. This is especially useful when the sparkline communicates information that is not repeated elsewhere in the row.

Interaction behavior​

Sparkline columns are read-only visual columns. They do not expose sorting or header filtering because a sparkline represents an ordered series, not a single scalar cell value. Normal row and cell navigation still works around the visual column.