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.
Works only with Chart.js >= 3.0.0
npm install --save chart.js @sgratzl/chartjs-chart-boxplot
see Samples on Github
four new types: boxplot
and violin
.
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
.
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
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
};
}
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
BoxPlotController.register();
...
new Chart(ctx, {
type: BoxPlotController.id,
data: [...],
});
Variant B:
import { BoxPlotChart } from '@sgratzl/chartjs-chart-boxplot';
new BoxPlotChart(ctx, {
data: [...],
});
npm i -g yarn
yarn set version 2
cat .yarnrc_patch.yml >> .yarnrc.yml
yarn install
yarn pnpify --sdk vscode
yarn compile
yarn test
yarn lint
yarn fix
yarn build
yarn docs
yarn release
yarn release:pre
Original credits belong to @datavisyn.