Chart.js Box Plots and Violin Plot Charts

Overview

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

Related Plugins

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 install
yarn sdks vscode

Common commands

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

Credits

Original credits belong to @datavisyn.

Comments
  • Issue while plotting boxplot

    Issue while plotting boxplot

    Expected behavior

    In chart.js while plotting boxplot with different datasets, some of the data is not shown in the chart. Tried with many other datasets, still facing same issue. Please help me to solve this

    It should plot boxplot with any datasets ,irrespective of the data(Number Dataset)

    Current behavior

    In chart.js while plotting boxplot with different datasets, some of the data is not shown in the chart. Tried with many other datasets, still facing same issue. Please help me to solve this

    I have tried plotting boxplot with different datasets, for some dataset its not plotting correctly. I think there is some issue in chart.js.

    For the same dataset have tried plotting boxplot using Highchart ,there the data is showing correct

    Using Chart.js :-[https://codepen.io/sgratzl/pen/QxoLoY] Using Highchart.js:-[https://jsfiddle.net/fo481t6j/1/]

    question 
    opened by ajmalmajeed97 13
  • mix chart + horizontal boxplot

    mix chart + horizontal boxplot

    Hi, I would like to create one chart with includes a histogram and a boxplot. Currently I have able to accomplish both using mixtype chartjs and two y-axis (screen shot 1).

    However what I really want is to create a box plot with his horizontal, i.e use the x-axis drawn for histogram to act as y-axis for the boxplot. Wondering if this is even possible. By adding indexAxis: 'y' to option it would make the histogram sideways as well which is what I don't want.

    I would like to get the historgram as is in screen shot 1, and get the boxplot overlayed as its drawn in screen shot 2. Is this possible to do with current library of charjs and charjs-chart-boxplot?

    Screen Shot 2022-12-12 at 2 19 18 PM Screen Shot 2022-12-12 at 2 20 26 PM

    question 
    opened by bjaysheel 6
  • Making a Violin Chart with precomputed values

    Making a Violin Chart with precomputed values

    Hi,

    Similar to https://github.com/sgratzl/chartjs-chart-boxplot/issues/22, I am trying to render a ViolinChart from precomputed values.

    BoxPlot works very nice with the Object data structure, but I cannot get ViolinChart to work. Would you have some example or directions?

    Actually, from https://github.com/sgratzl/chartjs-chart-boxplot/blob/main/src/data.ts#L219-L222 I'm not even sure it is possible to bypass this computation?

    Thanks!

    question answered 
    opened by LVerneyPEReN 6
  • Structure for using precomputed data in boxplot chart via props.

    Structure for using precomputed data in boxplot chart via props.

    So I saw this post and I was wondering how the structure in your attached linked works.

    I have a pretty weird data structure coming from my backend and I'm not exactly sure how to slot all of that data in the structure you have.

    So I have an array with a bunch of objects, each object looks like this :

    data: {
               "plot_info": {
                   "max": "40",
                   "median": "20",
                   "min": "0",
                   "plot_type": "box_plot",
                   "q1": "15",
                   "q3": "25",
                   "unit": "Mpa"
               },
               "value": {
                   "real_value": [ '22', '22', '22', '20', '10', '38', '28', '12', '34', '11', '27' ], // This continues with a total of lets say 100 numbers
                   "status": "warning"
               },
               "anomaly_data": {
                   "pt1": {
                       "status": "abnormal",
                       "time": "05/23/2022 15:50:00",
                       "value": 45
                   },
                   "pt2": {
                       "status": "warning",
                       "time": "05/23/2022 15:51:00",
                       "value": -1
                   }
               },
           },
    

    So all 3 of these objects are going to help me build out my boxplot chart. First, the plot_info is all of the boxplot data that the backend provides me, like the question linked from early March; there are some bits of data we don't need (plot_type and unit). Second, the value.real_value is all of the values in an array (status doesn't matter here). Finally, anomaly_data.value is our outliers.

    I am a bit lost on how to get this data to actually filter into the boxplot chart properly using the format you linked in the previous question:

    data: [
                  [1, 2, 3, 4, 5],
                  {
                    min: 1,
                    q1: 2,
                    median: 3,
                    q3: 4,
                    max: 5,
                  },
                  {
                    min: 1,
                    q1: 2,
                    median: 3,
                    q3: 4,
                    max: 5,
                    items: [1, 2, 3, 4, 5],
                  },
                  {
                    min: 1,
                    q1: 2,
                    median: 3,
                    q3: 4,
                    max: 5,
                    outliers: [1, 2, 3, 4, 5],
                  },
                ],
    

    This is all in one dataset, yet there are 3 objs with min, q1, median, q3, max, items; some of which have items, outliers or nothing at all. I figured the first array of [1, 2, 3, 4, 5] would be my value.real_value, but now I'm not so sure.

    Context

    • Version: "^3.7.2"
    • Browser: chrome

    This is in a vue3 project, but using largely JS for boxplot charts.

    Additional context

    I made a Codesandbox for this example and am trying to work with it, but so far, no luck. Any ideas or advice would be greatly appreciated. Again, thank you for all your help so far and I look forward to hearing back soon!

    question 
    opened by LovelyAndy 4
  • Outlier styles not updating

    Outlier styles not updating

    When I try and update the outlierStyle, BackgroundColor, Radius or any of the other styles, nothing seems to happen and the outlier stays the same tiny grey circle.

    To Reproduce

    1. Following the examples online, I have put the style in the datasets array, but still no updates.

    Expected behavior

    All of the styles chosen in the datesets array should show on the chart itself, but only the border styles update. outlierBackgroundColor should be orange per my line of outlierBackgroundColor: "#FF0000"

    Screenshots

    This is the style I am going for image

    But this is the style that I can make: image

    Context

    • Version: "@sgratzl/chartjs-chart-boxplot": "^3.7.2"
    • Browser: Chrome

    Additional context I've made a stackoverflow post trying to get some answers, but so far nothing has come up https://stackoverflow.com/questions/72189935/how-to-change-chartjs-boxplot-outlier-style

    Also, I made a codesandbox for it as well https://codesandbox.io/s/crazy-goodall-jy28zt?file=/src/components/BoxPlotChart.vue

    Cheers on this plugin though! I've never used a boxplot and was really struggling until I found this! Thanks for all your hard work and look forward to your reply!

    question answered 
    opened by LovelyAndy 4
  • hoveredOutlierIndex returns -1 every time

    hoveredOutlierIndex returns -1 every time

    When I have a box plot, and mouse over an outlier. The tooltip context returns hoveredOutlierIndex as -1 despite being hovered over an outlier.

    I tried to access it using this.

    chart_config.options.interaction = {
                mode: 'index'
            };
    
            chart_config.options.plugins.tooltip.callbacks.footer = (tooltip_items) => {
                console.log(tooltip_items);
            }
    
    bug 
    opened by SorataYuu 4
  • Boxplot not working properly

    Boxplot not working properly

    Chart type boxplot doesn't seem to behave as expected:

    • No tooltips appear
    • Chart is plotted only in first x column (dataset mapping issue?)

    To Reproduce Please refer to this demo -> https://codesandbox.io/s/interesting-haze-i0421

    Additional context

    • react
    • chartjs
    • react-chartjs-2

    🚩 Chart behaving normally when setting chart option indexAxis to 'y'.

    bug 
    opened by xde013 4
  • Provide summary data

    Provide summary data

    I'd like to have the plugin work with the summary data I give it (eg. whisker values, mean & quartiles), rather than working out the summary from a set of points. I think you refer to this in your readme but the link provided (https://github.com/sgratzl/chartjs-chart-boxplot/blog/dev/src/data.ts#L24-L49) is dead. Can you provide some detail how to do it, or fix the link?

    Can this plugin be used for chartjs v2 or is it only for v3?

    question answered 
    opened by JeremyBradshaw7 3
  • Highlight the specific point on box-plot

    Highlight the specific point on box-plot

    I like your library very much and it's exactly what I am looking for... Using you lib I have created a chart with 100 data points that represent the score from the different users. Now I wish to highlight the score of the specific user so that he can recognize his status on the box plot. is it possible to highlight the specific point of one user in the box-plot, such as with different colours or Size?

    I tried something inside datasets, but it's not working

            itemRadius: function(context) {
    
                  context.raw.forEach((val) => {
                       if(val == 5) {
                       console.log(val);
                       return 5;
    
                       }
                       else {
                        console.log(val);
                       return 20;
                       }
                       });
    
                    }
    

    I am using version 3.6.0

    Do you have any suggestions?

    Thanks!

    question answered 
    opened by deviirmr 3
  • Tooltips `custom` doesn't work

    Tooltips `custom` doesn't work

    I'm having the following question... After moving from @datavisyn/chartjs-chart-box-and-violin-plot Tooltips doesn't work. We are using custom function for tooltips render.

    Correct result before update was this p7ks5zwim7tw8909wfyxl5w1vcaeo3

    Screenshots / Sketches Screenshot 2022-07-18 at 14 44 09

    question 
    opened by roman-golubov 2
  • Is it possible to get a tooltip on individual points on a box plot?

    Is it possible to get a tooltip on individual points on a box plot?

    I would like to show a tooltip for each point in a horizontal box plot

    The outlier points get their own tooltip, but I can only seem to trigger a tooltip for the entire box area for any non-outliers. The tooltip item in the callbacks and filters doesn't help, because item in the argument only refers to the entire box as well, so i can't seem to narrow it down there. I've tried setting the interaction mode to point, but it doesn't seem to change this functionality.

    https://user-images.githubusercontent.com/4277439/168725257-300d939f-9f45-4703-a632-351c316282ff.mov

    I'm on 3.7.2

    Thanks

    question answered 
    opened by gisheri 2
  • build(deps): bump json5 from 1.0.1 to 1.0.2

    build(deps): bump json5 from 1.0.1 to 1.0.2

    Bumps json5 from 1.0.1 to 1.0.2.

    Release notes

    Sourced from json5's releases.

    v1.0.2

    • Fix: Properties with the name __proto__ are added to objects and arrays. (#199) This also fixes a prototype pollution vulnerability reported by Jonathan Gregson! (#295). This has been backported to v1. (#298)
    Changelog

    Sourced from json5's changelog.

    Unreleased [code, diff]

    v2.2.3 [code, diff]

    v2.2.2 [code, diff]

    • Fix: Properties with the name __proto__ are added to objects and arrays. (#199) This also fixes a prototype pollution vulnerability reported by Jonathan Gregson! (#295).

    v2.2.1 [code, diff]

    • Fix: Removed dependence on minimist to patch CVE-2021-44906. (#266)

    v2.2.0 [code, diff]

    • New: Accurate and documented TypeScript declarations are now included. There is no need to install @types/json5. (#236, #244)

    v2.1.3 [code, diff]

    • Fix: An out of memory bug when parsing numbers has been fixed. (#228, #229)

    v2.1.2 [code, diff]

    ... (truncated)

    Commits

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    dependencies 
    opened by dependabot[bot] 0
  • Library Not compatible with ivy - angular version 14

    Library Not compatible with ivy - angular version 14

    This likely means that the library (@sgratzl/chartjs-chart-boxplot) which declares BoxPlotChart has not been processed correctly by ngcc, or is not compatible with Angular Ivy. Check if a newer version of the library is available, and update if so. Also consider checking with the library's authors to see if the library is expected to be compatible with Ivy.

    this is the issue i am facing while after installing @sgratzl/chartjs-chart-boxplot

    opened by Ram7221 2
Releases(v4.1.0)
Owner
Samuel Gratzl
Research Software Engineer with a focus on Data Visualization - author of @lineupjs and @upsetjs
Samuel Gratzl
Smoothie Charts: smooooooth JavaScript charts for realtime streaming data

Smoothie Charts is a really small charting library designed for live streaming data. I built it to reduce the headaches I was getting from watching ch

Joe Walnes 2.2k Dec 13, 2022
J2CL and GWT Charts library based on CHART.JS

Charba - J2CL and GWT Charts library based on CHART.JS What's Charba GWT Web toolkit doesn't have charting library available out of the box. There are

Pepstock.org 56 Dec 17, 2022
Beautiful charts for Angular based on Chart.js

ng2-charts slack Beautiful charts for Angular based on Chart.js Usage & Demo Samples using ng2-charts https://valor-software.com/ng2-charts/ Installat

Valor Software 2.2k Jan 4, 2023
Chart.js plugin to create charts with a hand-drawn, sketchy, appearance

chartjs-plugin-rough Chart.js plugin to create charts with a hand-drawn, sketchy, appearance Version 0.2 requires Chart.js 2.7.0 or later, and Rough.j

Akihiko Kusanagi 73 Dec 1, 2022
Chart.js module for creating treemap charts

chartjs-chart-treemap Chart.js v3.6.0 module for creating treemap charts. Implementation for Chart.js v2 is in 2.x branch Documentation You can find d

Jukka Kurkela 99 Dec 18, 2022
A Simple Dashboard Chart in Laravel Nova using Chart JS

A Simple Dashboard Chart in Laravel Nova using Chart JS. Starting create your own dashboard with Chart JS Integration can save your time and help you maintain consistency across standard elements such as Bar, Stacked, Line, Area, Doughnut and Pie Chart.

Kuncoro Wicaksono 177 Jan 4, 2023
Chart.js plugin to defer initial chart updates

Chart.js plugin to defer initial chart updates until the user scrolls and the canvas appears inside the viewport, and thus trigger the initial chart a

Chart.js 97 Nov 9, 2022
Bar Funnel Chart extension for Chart.js

Chart.BarFunnel.js Provides a Bar Funnel Chart for use with Chart.js Documentation To create a Bar Funnel Chart, include Chart.BarFunnel.js after Char

Chart.js 58 Nov 24, 2022
TradeX-chart is a trade chart written in plain (vanilla) JavaScript with minimal dependencies

TradeX-chart is a trade chart written in plain (vanilla) JavaScript with minimal dependencies; use it with any framework or backend.

null 24 Dec 12, 2022
Free Bootstrap 5 Admin and Dashboard Template that comes with all essential dashboard components, elements, charts, graph and application pages. Download now for free and use with personal or commercial projects.

PlainAdmin - Free Bootstrap 5 Dashboard Template PlainAdmin is a free and open-source Bootstrap 5 admin and dashboard template that comes with - all e

PlainAdmin 238 Dec 31, 2022
Progressive pie, donut, bar and line charts

Peity Peity (sounds like deity) is a jQuery plugin that converts an element's content into a mini <svg> pie, donut, line or bar chart. Basic Usage HTM

Ben Pickles 4.2k Jan 1, 2023
Ember Charts 3.5 2.3 L2 JavaScript A powerful and easy to use charting library for Ember.js

Ember Charts A charting library built with the Ember.js and d3.js frameworks. It includes time series, bar, pie, and scatter charts which are easy to

Addepar 793 Dec 7, 2022
Compose complex, data-driven visualizations from reusable charts and components with d3

d3.compose Compose rich, data-bound charts from charts (like Lines and Bars) and components (like Axis, Title, and Legend) with d3 and d3.chart. Advan

Cornerstone Systems 702 Jan 3, 2023
RocketTrades - Discord Stocks and Charts bot. Written for the RocketTrades Discord bot.

Rocket Trades RocketTrades, Discord Charts and Stocks bot. MORE DETAILS AND UPDATES TO COME SOON Getting started • Installation • Configuration • Inte

Ethan Primmer 3 Feb 4, 2022
Beautiful and interactive javascript charts for Java-based web applications.

Wicked Charts Beautiful and interactive JavaScript charts for Java-based web applications. Check out the Changelog Check out the Feature Overview with

adesso SE 85 Aug 23, 2022
Simple package to facilitate and automate the use of charts in Laravel 5.x using Chartjs v2 library

laravel-chartjs - Chart.js v2 wrapper for Laravel 5.x Simple package to facilitate and automate the use of charts in Laravel 5.x using the Chart.js v2

Felix Costa 473 Dec 15, 2022
Using ASP.NET Core, SignalR, and ChartJs to create real-time updating charts

Real-time Charts with ASP.NET Core, SignalR, and Chart.js This project shows how to update a real-time chart in your web browser using technologies li

Khalid Abuhakmeh 11 Nov 25, 2022
Simple HTML5 Charts using the tag

Simple yet flexible JavaScript charting for designers & developers Documentation Currently, there are two versions of the library (2.9.4 and 3.x.x). V

Chart.js 59.4k Jan 7, 2023
Simple responsive charts

Big welcome by the Chartist Guy Checkout the documentation site at http://gionkunz.github.io/chartist-js/ Checkout this lightning talk that gives you

Gion Kunz 26 Dec 30, 2022