Home - News ( United States | United Kingdom | Italy | Germany ) - Football scores

Showing content from https://github.com/sgratzl/chartjs-chart-boxplot below:

sgratzl/chartjs-chart-boxplot: Chart.js Box Plots and Violin Plot Charts

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.

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

see Examples

and

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.

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

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/blob/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, LinearScale, CategoryScale } from 'chart.js';
import { BoxPlotController, BoxAndWiskers } from '@sgratzl/chartjs-chart-boxplot';

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

new Chart(ctx, {
  type: 'boxplot',
  data: [...],
});

Variant B:

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

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

Check out also my other chart.js plugins:

• chartjs-chart-error-bars for rendering errors bars to bars and line charts
• chartjs-chart-geo for rendering map, bubble maps, and choropleth charts
• chartjs-chart-graph for rendering graphs, trees, and networks
• chartjs-chart-pcp for rendering parallel coordinate plots
• chartjs-chart-venn for rendering venn and euler diagrams
• chartjs-chart-wordcloud for rendering word clouds
• chartjs-plugin-hierarchical for rendering hierarchical categorical axes which can be expanded and collapsed

npm i -g yarn
yarn install
yarn sdks vscode

yarn compile
yarn test
yarn lint
yarn fix
yarn build
yarn docs

Original credits belong to @datavisyn.

RetroSearch is an open source project built by @garambo | Open a GitHub Issue

Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo

HTML: 3.2 | Encoding: UTF-8 | Version: 0.7.4