Chart.js module for charting box and violin plots. Works only with Chart.js >= 2.8.0
npm install --save chart.js chartjs-chart-box-and-violin-plotsee Samples on Github
and CodePen
four new types: boxplot, horizontalBoxplot, violin, and horizontalViolin.
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 * @scriptable * @indexable */ backgroundColor: string; /** * @default see rectangle * @scriptable * @indexable */ borderColor: string; /** * @default null takes the current borderColor * @scriptable * @indexable */ medianColor: string; /** * @default 1 * @scriptable * @indexable */ borderWidth: number; /** * radius used to render outliers * @default 2 * @scriptable * @indexable */ outlierRadius: number; /** * @default see rectangle.backgroundColor * @scriptable * @indexable */ outlierColor: string; /** * radius used to render items * @default 0 so disabled * @scriptable * @indexable */ 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 * @scriptable * @indexable */ itemBackgroundColor: string; /** * border color for items * @default see rectangle backgroundColor * @scriptable * @indexable */ itemBorderColor: string; /** * padding thst is added around the bounding box when computing a mouse hit * @default 1 * @scriptable * @indexable */ 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.
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'; }; }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[]; }Note: The statistics will be cached within the array. Thus, if you manipulate the array content without creating a new instance the changes won't be reflected in the stats. See also CodePen for a comparison.
npm install npm run build
Developed by datavisyn.