Skip to main content

Sparkline Column

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', width: 180),
    FdcSparklineColumn(
      label: 'Trend',
      width: 180,
      type: FdcSparklineType.line,
      highlightMin: true,
      highlightMax: true,
      highlightLast: true,
      fields: const [
        FdcSparklineField(
          fieldName: 'monthly_trend',
          type: FdcSparklineFieldType.array,
        ),
      ],
    ),
    FdcSparklineColumn(
      label: 'Quarterly',
      width: 170,
      type: FdcSparklineType.barVertical,
      fields: const [
        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, zero-line support, tooltip customization, and style overrides.

Example​

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

The sample above includes long array-style data for line-oriented charts and a separate compact quarterly bar configuration so the different sparkline styles are easy to compare.