ccb

@sgratzl/chartjs-chart-boxplot

Chart.js Box Plots and Violin Plot Charts

Showing:

Popularity

Downloads/wk

803

GitHub Stars

9

Maintenance

Last Commit

1mo ago

Contributors

12

Package

Dependencies

1

License

MIT

Type Definitions

Built-In

Tree-Shakeable

Yes?

Categories

Readme

Chart.js Box and Violin Plot

License: MIT NPM Package Github Actions

Chart.js module for charting box and violin plots. This is a maintained fork of @datavisyn/chartjs-chart-box-and-violin-plot, which I originally developed during my time at datavisyn.

Box Plot Violin Plot

Check out also my other chart.js plugins:

Install

npm install --save chart.js @sgratzl/chartjs-chart-boxplot

Usage

see Samples on Github

and Open in CodePen

Chart

four new types: boxplot and violin.

Config

The config can be done on a per dataset .data.datasets[0].minStats or for all datasets under the controllers name. e.g., .options.boxplot.datasets.minStats.

see https://github.com/sgratzl/chartjs-chart-boxplot/blog/dev/src/data.ts#L100-L147

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:

see https://github.com/sgratzl/chartjs-chart-boxplot/blog/dev/src/data.ts#L24-L49

Tooltips

In order to simplify the customization of the tooltips the tooltip item given to the tooltip callbacks was improved. The default toString() behavior should be fine in most cases. The tooltip item has the following structure:

interface ITooltipItem {
  label: string; // original
  value: {
    raw: IBoxPlotItem | IViolinItem;
    /**
     * in case an outlier is hovered this will contains its index
     * @default -1
     */
    hoveredOutlierRadius: number;
    /**
     * toString function with a proper default implementation, which is used implicitly
     */
    toString(): string;

    min: string;
    median: string;
    max: string;
    items?: string[];

    //... the formatted version of different attributes IBoxPlotItem or ViolinItem
  };
}

ESM and Tree Shaking

The ESM build of the library supports tree shaking thus having no side effects. As a consequence the chart.js library won't be automatically manipulated nor new controllers automatically registered. One has to manually import and register them.

Variant A:

import Chart from 'chart.js';
import { BoxPlotController } from '@sgratzl/chartjs-chart-boxplot';

// register controller in chart.js and ensure the defaults are set
Chart.register(BoxPlotController);
...

new Chart(ctx, {
  type: BoxPlotController.id,
  data: [...],
});

Variant B:

import { BoxPlotChart } from '@sgratzl/chartjs-chart-boxplot';

new BoxPlotChart(ctx, {
  data: [...],
});

Development Environment

npm i -g yarn
yarn set version 2
cat .yarnrc_patch.yml >> .yarnrc.yml
yarn install
yarn pnpify --sdk vscode

Common commands

yarn compile
yarn test
yarn lint
yarn fix
yarn build
yarn docs
yarn release
yarn release:pre

Credits

Original credits belong to @datavisyn.

Rate & Review

Great Documentation0
Easy to Use0
Performant0
Highly Customizable0
Bleeding Edge0
Responsive Maintainers0
Poor Documentation0
Hard to Use0
Slow0
Buggy0
Abandoned0
Unwelcoming Community0
100