Chart.js Box Plot addon
Switch branches/tags
Clone or download
Latest commit 15a2b69 Nov 13, 2018

README.md

Chart.js Box and Violin Plot

datavisyn NPM Package CircleCI

Chart.js module for charting box and violin plots

Box Plot Violin Plot

Install

npm install --save chart.js chartjs-chart-box-and-violin-plot

Usage

see Samples on Github

and CodePen

Chart

four new types: boxplot, horizontalBoxplot, violin, and horizontalViolin.

Styling

The boxplot element is called boxandwhiskers. The basic options are from the rectangle element. The violin element is called violin also based on the rectangle element.

interface IBaseStyling {
  /**
   * @default see rectangle
   */
  backgroundColor: string;
  /**
   * @default see rectangle
   */
  strokeColor: string;
  /**
   * @default 1
   */
  borderWidth: number;

  /**
   * radius used to render outliers
   * @default 2
   */
  outlierRadius: number;

  /**
   * @default see rectangle.backgroundColor
   */
  outlierColor: string;

  /**
   * radius used to render items
   * @default 0 so disabled
   */
  itemRadius: number;

  /**
   * item style used to render items
   * @default circle
   */
  itemStyle: 'circle'|'triangle'|'rect'|'rectRounded'|'rectRot'|'cross'|'crossRot'|'star'|'line'|'dash';

  /*
   * background color for items
   * @default see rectangle backgroundColor
   */
  itemBackgroundColor: string;

  /*
   * border color for items
   * @default see rectangle backgroundColor
   */
  itemBorderColor: string;

  /**
   * padding thst is added around the bounding box when computing a mouse hit
   * @default 1
   */
  hitPadding: number;
}

interface IBoxPlotStyling extends IBaseStyling {
  // no extra styling options
}

interface IViolinStyling extends IBaseStyling {
  /**
  * number of sample points of the underlying KDE for creating the violin plot
  * @default 100
  */
  points: number;
}

In addition, two new scales were created arrayLinear and arrayLogarithmic. They were needed to adapt to the required data structure.

Scale Options

Both arrayLinear and arrayLogarithmic support the two additional options to their regular counterparts:

interface IArrayLinearScale {
  ticks: {
    /**
     * statistic measure that should be used for computing the minimal data limit
     * @default 'min'
     */
    minStats: 'min'|'q1'|'whiskerMin';

    /**
     * statistic measure that should be used for computing the maximal data limit
     * @default 'max'
     */
    maxStats: 'max'|'q3'|'whiskerMax';
  };
}

Data structure

Both types support that the data is given as an array of numbers number[]. The statistics will be automatically computed. In addition, specific summary data structures are supported:

interface IBaseItem {
  min: number;
  median: number;
  max: number;
  /**
   * values of the raw items used for rendering jittered background points
   */
  items?: number[];
}

interface IBoxPlotItem extends IBaseItem {
  q1: number;
  q3: number;
  whiskerMin?: number;
  whiskerMax?: number;
  /**
   * list of box plot outlier values
   */
  outliers?: number[];
}

interface IKDESamplePoint {
  /**
   * sample value
   */
  v: number;
  /**
   * sample estimation
   */
  estimate: number;
}

interface IViolinItem extends IBaseItem {
  /**
   * samples of the underlying KDE
   */
  coords: IKDESamplePoint[];
}

Building

npm install
npm run build

Developed by  datavisyn.