Regression Line Extension Guide

Regression lines are commonly used in statistical scenarios. The vchart-extensions package supports regression line extensions, including calculation and display of common regression lines (polynomial regression, kernel density estimation (KDE), empirical cumulative distribution function (ECDF), etc.).

Registering the Extension

The regression line component is located in the extension package. You need to register the component before use:

import VChart from '@visactor/vchart';
import {
  registerRegressionLine,
  appendBarRegressionLineConfig,
  appendHistogramRegressionLineConfig,
  appendScatterRegressionLineConfig
} from '@visactor/vchart-extension';

registerRegressionLine();

If you are using the CDN global variable VChartExtension, call VChartExtension.registerRegressionLine().

API Overview

• registerRegressionLine() — Registers the regression line component and enables additional configuration methods.
• appendBarRegressionLineConfig(spec, config) — Adds regression line configuration to bar chart specs. Note: currently only supports simple bar charts (no grouping, stacking, etc.), and only polynomial regression lines.
• appendHistogramRegressionLineConfig(spec, config) — Adds regression overlays to histograms (supports kde and ecdf).
• appendScatterRegressionLineConfig(spec, config) — Adds regression lines to scatter plots.

Bar Chart Regression Line

Example

Use appendBarRegressionLineConfig to add regression lines to a bar chart:

Configuration Type Definition

The regression line configuration type is defined as follows:

{
  /**
   * Degree of the polynomial
   */
  degree?: number;
  /**
   * Color value
   */
  color?: string;
  /**
   * Regression line configuration
   */
  line?: {
    /**
     * Whether to show the series label
     * @default true
     */
    visible?: boolean;
    /**
     * Line style
     */
    style?: ILineGraphicAttribute;
  };
  /**
   * Regression line formula label
   */
  label?: {
    /**
     * Whether to show the label
     */
    visible?: boolean;
    /**
     * Label text
     */
    text: string;
    /**
     * Label style
     */
    style?: ITextGraphicAttribute;
  };
  /**
   * Confidence interval
   */
  confidenceInterval?: {
    visible?: boolean;
    style?: IAreaGraphicAttribute;
  };
}

Histogram Example (KDE / ECDF)

Example

Histogram regression supports overlaying KDE or ECDF curves on histograms. Make sure your data has been transformed with bin, and that xField/x2Field/yField are configured correctly.

Configuration Type Definition

The regression line configuration type is defined as follows:

{
  /**
   * Type of regression line
   */
  type: 'kde' | 'ecdf';
  /**
   * Color value
   */
  color?: string;
  /**
   * Regression line configuration
   */
  line?: {
    /**
     * Whether to show the series label
     * @default true
     */
    visible?: boolean;
    /**
     * Line style
     */
    style?: ILineGraphicAttribute;
  };
  /**
   * Regression line formula label
   */
  label?: {
    /**
     * Whether to show the label
     */
    visible?: boolean;
    /**
     * Label text
     */
    text: string;
    /**
     * Label style
     */
    style?: ITextGraphicAttribute;
  };
}

Scatter Plot / Series Example

Example

Use appendScatterRegressionLineConfig to add regression overlays to scatter plots. You can configure degree, type, styles, and more:

Configuration Type Definition

The regression line configuration type is defined as follows:

{
  /**
   * Type of regression line
   */
  type: 'linear' | 'logisitc' | 'lowess' | 'polynomial';
  /**
   * Degree of polynomial regression, only valid when type is polynomial
   */
  polynomialDegree?: number;
  /**
   * Color value
   */
  color?: string;
  /**
   * Regression line configuration
   */
  line?: {
    /**
     * Whether to show the series label
     * @default true
     */
    visible?: boolean;
    /**
     * Line style
     */
    style?: ILineGraphicAttribute;
  };
  /**
   * Regression line formula label
   */
  label?: {
    /**
     * Whether to show the label
     */
    visible?: boolean;
    /**
     * Label text
     */
    text: string;
    /**
     * Label style
     */
    style?: ITextGraphicAttribute;
  };
  /**
   * Confidence interval
   */
  confidenceInterval?: {
    visible?: boolean;
    style?: IAreaGraphicAttribute;
  };
}

Notes and Recommendations

• Histogram regression relies on bin output fields (such as x0/x1/count). Make sure the outputNames in the bin transform match what the regression component expects.
• Confidence interval calculation incurs extra overhead. For large datasets or interactive updates, it is recommended to turn it off.
• The append* methods directly modify the input spec. If you need to keep the original spec, deep copy it before applying changes.