Chart options

The time-series chart (DatastripesAnomalyChart / datastripes-anomaly-chart) supports two render modes, controlled by customOptions.chart.renderMode (or the render-mode attribute on the Custom Element, or the renderMode input on the Angular component):

• 'line' (default): a connected line through the series, with a shaded baseline band showing the expected range, and anomalous points marked with a colored dot (yellow = low severity, amber = medium, red = high).
• 'bar': one bar per point instead of a line. Each bar is colored the same way — blue for normal points, yellow/amber/red for anomalies by severity — which makes individual anomalous points easier to scan in sparse or low-frequency data (e.g. daily/weekly aggregates) where a line would otherwise look like noise.

React / Vue

<DatastripesAnomaly
  data={rows}
  customOptions={{ chart: { renderMode: 'bar' } }}
/>

<DatastripesAnomaly :data="rows" :custom-options="{ chart: { renderMode: 'bar' } }" />

Angular

<datastripes-anomaly-chart
  [points]="result.points"
  [licenseStatus]="result.licenseStatus"
  renderMode="bar"
/>

Vanilla / Web Components

<datastripes-anomaly-chart render-mode="bar"></datastripes-anomaly-chart>

Full ChartStyleOptions

interface ChartStyleOptions {
  renderMode?: 'line' | 'bar';
  historicalColor?: string;
  anomalyColor?: string;
  baselineColor?: string;
  boundColor?: string;
  gridColor?: string;
  backgroundColor?: string;
  textColor?: string;
  lineWidth?: number;
  barGapRatio?: number;   // bar mode only, fraction of each slot left as gap (default 0.25)
  showBaseline?: boolean;
  showBounds?: boolean;
  showGrid?: boolean;
  showTooltips?: boolean;
  yAxisFormat?: 'currency' | 'percent' | 'compact' | 'number';
  yAxisPrefix?: string;
  yAxisSuffix?: string;
}

See the Types Reference for the full type, and Scatter anomaly detection if your data is a bivariate (x, y) point cloud rather than an ordered time series — that mode uses a separate DatastripesScatterChart component, not a renderMode option on this one.