sgratzl / chartjs-chart-boxplot

Chart.js Box Plots and Violin Plot Charts

Servus

I'm Sam. I'm a research software engineer with a focus on interactive data exploration. I'm a Full Stack Developer with 10+ years of experience. In 2017, I finished his PhD in Computer Science with a focus on Information Visualization at the Johannes Kepler University, Linz, Austria. I love to dig into code, hunt bugs, and design new platforms. My goal is enabling researcher to discover more insights easier and faster as well as develop libraries that help others developers to do the same.

I create and maintain specialized visualization libraries such as LineUp-lite, LineUp.js or UpSet.js. In addition, I contribute and create plugins for web visualization frameworks such as chart.js or cytoscape.js.

chartjs-chart-boxplot's Issues

itemBorderColor config bug in v2.3.2

There's a bug in version 2.3.2 (which I have to use as I'm using chart.js v2), where itemBorderColor is not properly applied as a strokeStyle:

Seems to be a typo Stle instead of Style.

Can a fix be applied to v2 and rolled out to CDN?

Correct Tooltip modification technique

I'm having an issue modifying the tooltip, I was requested to add dollar signs before each value, to do this I ended up pulling the default tooltip callback out of the Chart.BoxPlot.js file and modifying it in the options of my chart instance. However, this also required that I pull out the toFixed function as well.

This works, and I was able to add my dollar sign, but it felt a bit hacky, I was wondering if there is an intended procedure for this?

Codepen of this in action:
https://codepen.io/djones4822/pen/MWmbBqa

Code used:

Extracted from BoxPlot, add anywhere in your js file:

  function toFixed(value) {
    var decimals = this._chart.config.options.tooltipDecimals; // inject number of decimals from config

    if (decimals == null || typeof decimals !== 'number' || decimals < 0) {
      return value;
    }

    return Number.parseFloat(value).toFixed(decimals);
  }

Add to the options section of the chart definition:

//existing options code
tooltips: {
        callbacks: {
          boxplotLabel: function boxplotLabel(
            item,
            data,
            b,
            hoveredOutlierIndex
          ) {
            var datasetLabel = data.datasets[item.datasetIndex].label || "";
            var label = ""
              .concat(datasetLabel, " ")
              .concat(
                typeof item.xLabel === "string" ? item.xLabel : item.yLabel
              );

            if (!b) {
              return "".concat(label, " (NaN)");
            }

            if (hoveredOutlierIndex >= 0) {
              var outlier = b.outliers[hoveredOutlierIndex];
              return ""
                .concat(label, " (outlier: ")
                .concat(toFixed.call(this, outlier), ")");
            }

            return ""
              .concat(label, " (min: $")
              .concat(toFixed.call(this, b.min), ", q1: $")
              .concat(toFixed.call(this, b.q1), ", median: $")
              .concat(toFixed.call(this, b.median), ", q3: $")
              .concat(toFixed.call(this, b.q3), ", max: $")
              .concat(toFixed.call(this, b.max), ")");
          }
        }
      }
// remaining options

"boxplot" is not a registered controller

When I compile my app, it is getting a erro but developement is working ok.

To Reproduce

error below:
react-dom.production.min.js:189 Error: "boxplot" is not a registered controller.
at t.value (core.registry.js:178:13)
at t.value (core.registry.js:66:17)
at t.value (core.controller.js:455:42)
at t.value (core.controller.js:508:33)
at new t (core.controller.js:206:12)
at P (chart.tsx:41:24)
at chart.tsx:97:5
at ol (react-dom.production.min.js:244:332)
at Sc (react-dom.production.min.js:286:111)
at react-dom.production.min.js:283:409
du @ react-dom.production.min.js:189
n.callback @ react-dom.production.min.js:189
Na @ react-dom.production.min.js:144
wl @ react-dom.production.min.js:262
El @ react-dom.production.min.js:260
bl @ react-dom.production.min.js:259
(anonymous) @ react-dom.production.min.js:283
_c @ react-dom.production.min.js:281
cc @ react-dom.production.min.js:273
Vo @ react-dom.production.min.js:127
(anonymous) @ react-dom.production.min.js:267
react-dom.production.min.js:189 Error: "category" is not a registered scale.
at t.value (core.registry.js:178:13)
at t.value (core.registry.js:90:17)
at core.controller.js:370:37
at O (helpers.core.ts:149:12)
at t.value (core.controller.js:355:5)
at t.value (core.controller.js:561:10)
at t.value (core.controller.js:495:10)
at new t (core.controller.js:206:12)
at P (chart.tsx:41:24)
at chart.tsx:97:5
d

Expected behavior

Screenshots

Context

• Version:
  "@sgratzl/chartjs-chart-boxplot": "^4.1.2",
  "chart.js": "^4.3.0",
  "react-chartjs-2": "^5.2.0",
• Browser:
  Chrome

Additional context

Example website is down (https://sgratzl.com/)

Website seems to be no longer accessible: https://sgratzl.com/

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'.

simplify rendering customization

It would be great if there is a easy way to extend the element and add new rendering features

Type '"metaExtensions"' cannot be used to index type 'ChartTypeRegistry[key]'.

node_modules/chart.js/types/index.esm.d.ts:452:25 - error TS2536: Type '"metaExtensions"' cannot be used to index type 'ChartTypeRegistry[key]'.

As I can see, you should update ChartTypeRegistry and add metaExtensions property (src/controllers/BoxPlotController.ts)

Outliers and statistic values do not correspond to the provided data

Hello,

First thank you very much for this plugin which is a must-have for ChartJS !

I encountered recently a very strange bug in which the outliers values cannot be found in the original data. Their values are slightly altered from the one provided. I use the latest version of ChartJS (v4.2.1) and chartjs-chart-boxplot (v4.1.1), and the issue seems to be present on multiple browsers (at least Chrome & Firefox).

I have made an example Codepen of the issue based on the demo one you provided:
https://codepen.io/trobin/pen/RweRZwL

When hovering on the lower outlier, you can see that the displayed value is 57297216 instead of 57297214. Furthermore, hovering on the upper outlier displays 117540928 instead of 117540924.
The min/max values are also incorrect when hovering on the boxplot itself, and the median seems also off.

Am I missing something obvious ? I would greatly appreciate your help.

Cheers,
Thibault

Tooltip displaying NaN for values >999

Tooltips are showing NaN for values > 999, I think it's because the number is formatted as a string before it is passed to the formatter again. I can avoid this by writing my own label callback and doing my own formatting/handling.

To Reproduce

create project, run npm install --save @sgratzl/chartjs-chart-boxplot, download the items sample and utils sample files, update script src in items.html and update line 19 to something like:

const random = (min, max) => () => b() * ((max || 10000) - (min || 1000)) + (min || 1000);

Screenshots

Context

• Version: chartjs-chart-boxplot: version 3.1.0 / chart.js version 3.3.2
• Browser: Chrome 91.0.4472.124

Controlling the width / thickness of the boxplot

Is it possible to control how "thick" the boxplot is, ie its width?

Here's a screenshot of what I have so far:

This is a horizontal boxplot, so what I'm trying to reduce is how 'tall' the box is in the vertical direction.

Here's a Codepen that's pretty close to what I'm doing right now: https://codepen.io/Allen-Yang-the-reactor/pen/poGOpxW

Configure colours

It would be great if you could configure the colours for above and below the median separately, or all elements of the box (whiskers etc).

Is it possible to ignore outliers?

I'd like to draw some boxplots without the outliers. Is this something that is possible?

NPM ?

Hello,

is this package available via npm?

I get this when trying to install it:

npm install chartjs-chart-boxplot

npm ERR! code E404
npm ERR! 404 Not Found - GET https://registry.npmjs.org/chartjs-chart-boxplot - Not found
npm ERR! 404
npm ERR! 404 'chartjs-chart-boxplot@*' is not in this registry.
npm ERR! 404
npm ERR! 404 Note that you can also install from a
npm ERR! 404 tarball, folder, http url, or git url.

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?

Ability to remove the whiskers

Is it possible to remove the whiskers from the plot? I just want the IQR to be displayed (just the box). How can I turn the whikers off?

Also, doing a hybrid chart with multiple items on each tick of the x axis. The boxplots arrange next to each other on each tick nicely, but I am unable to get a bubble, which i am using as a reference point for the current data to lineup on top of the boxplot connected to it. Is there a way to do this?

Adding data points for reference

First of all, thanks for this awesome plugin!

I have been able to generate the boxplot with the default values, mix/q2/median/q3/max.

For my exercise, I would however like to add some additional data points for reference purpose. How would I go about this?

As shown in the image on the repository,
https://user-images.githubusercontent.com/4129778/42724341-9a6ec554-8770-11e8-99b5-626e34dafdb3.png
It shows additional fields as well.

I would like to show, for example, the value "Previous" as a unique value on the plot/chart. Would you have any advice how to go about this?

Feature request: tooltip on individual points on a box plot

This is a very handy library, thank you @sgratzl!

Feature request: It would be great if we can allow for tooltips in all individual points in the box plot and not only for the outlier.

User story

I would like to add further information on the individual points that are displayed via tooltip when user hovers over the specific points. So when user hovers over a point, it will know further custom context about how the point was introduced in the boxplot, and that information ideally will be displayed via a tooltip, triggered on point hover.

However, as of now, it is only possible to trigger a tooltip on hover on the outlier point only (based on #30).

Considering that it is already possible to trigger a tooltip on the outlier point, what would it take (implementation-wise on the library, not user-side) for you to enable tooltips on all individual points and not just on the outlier point? Is this something that you think is possible to further implement in this library? This would be very handy and make this library a lot more useful that can cover more use cases for boxplot visualization.

Thank you!

Why does it say "NaN" instead of numbers in the list of min, max, 25%, 50%, 75% ??

Hi there.
Thanks for all your great work.

In the sample given as an example;
https://codepen.io/sgratzl/pen/QxoLoY
when I mouseover the boxplots, instead of giving the values for the mean, min, max, 25%, 50% and 75% is says "NaN".

https://prnt.sc/13oo9kf

Why is that?

Trying to use this with vue-chartjs

I am trying to use this package with vue-chartjs: 3.5.1, chartjs: 2.9.4, and vue: 2.6.12, but I am getting the the following error:

./node_modules/@sgratzl/chartjs-chart-boxplot/build/index.umd.js
Module not found: Error: Can't resolve 'chart.js/helpers' in 'D:-\src\webapp\vue_frontend\node_modules@sgratzl\chartjs-chart-boxplot\build'

My BoxPlot.js looks like this:

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


export default {
  name: 'box-plot',
  extends: BoxPlotChart,
  mixins: [mixins.reactiveProp],
  props: {
    options: Object,
  },
  mounted() {
    this.renderChart(this.chartData, this.options);
  }
};

Other parts of the code is taken from the following example:
https://github.com/sgratzl/vue-chartjs-boxplot

The reason I am trying to use this package instead of chartjs-chart-box-and-violin-plot, is because with my versions of vue, chartjs and vue-chartjs it seems that the boxplot doesn't update properly. It sometimes works on refresh and sometimes not.

Is there something I can do to make this package work with vue?

Making a Violin Chart with precomputed values

Hi,

Similar to #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!

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

Screenshots / Sketches

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!

boxplot displaying the min/max as top and bottom whiskers

Hello,

First of all, many thanks for this very useful library.

I thought the top and bottom whiskers of a box plot would represent the max/min values. It seems that by default, boxplots are using the IQR to define the top/bottom whiskers.
e.g. with these 2 populations:

• {min: 50,q1: 70,median: 80,mean: 82,q3: 90,max: 150,}
• {min: 50,q1: 75,median: 80,mean: 82,q3: 85,max: 150,}

where population 1 has an IQR of 20 versus an IQR of 10 for population 2 but all other values being identical.
I'm getting the following graph:

I understand the benefits of using the IQR to define the top/bottom whiskers, but is there a way to not use the IQR and just use the min/max, no matter what they are?

[email protected]
[email protected]

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

But this is the style that I can make:

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!

median size increase

Is it possible to increase median line height ? currently i can only change median color

Whiskers are drawn wrong

version: latest, browser: Chrome
https://stackblitz.com/edit/vitejs-vite-ixmp1s?file=src%2FApp.tsx

Error: "boxplot" is not a registered controller when using plugin with PrimeVue Charts

"@sgratzl/chartjs-chart-boxplot": "^4.2.7"

I've read other issues with this error, but still cannot understand how to properly init BoxPlot plugin when Chart.register() is not exposed.

Their canonical way to attach plugins is:

  <Chart
    :data="boxplotData" 
    :options="{ responsive: true }"
    :plugins="[BoxPlotChart]" 
  />

And it seem to work with other plugins, but not with BoxPlot.

Full repro:
https://stackblitz.com/edit/mgfvrw-3xiqfx?file=src%2FApp.vue

(the page is empty as it fails at setup stage, please see console for errors)

I ended up using vue-chartjs: "^5.2.0" for charts only, so in general this plugin works fine within vue, but only with .register() method.

As it's not clear whether it's a bug or usage specifics, so I crossposted it their repo also:
https://github.com/orgs/primefaces/discussions/187#discussioncomment-7510393

Thanks heaps for the plugin! Very useful.

Violin chart does not work when config.data.labels is empty

I am upgrading to chart.js 4.x, and switching over from the original repo to this maintained fork.

I ran into an unexpected issue where my violin chart did not render until I added labels: [''] to my my config.

In the original repo, labels was not required. As a workaround I am using an empty string at the moment.

Where is the configuration document.

use the violin diagram, but I can't find its configuration documentation. Thank you very much!

mean dot in boxplots

see datavisyn/chartjs-chart-box-and-violin-plot#100

Hey!
Is there any way to add a mean "dot" to the boxplot (like boxplots usually look like), in addition to the median line I got to show?
In such case, where should I add the mean value to the dataset? As of right now I've constructed the dataset like this: min, q1, median, q3, max.

Thanks!

'requestAnimationFrame' handler took 50ms

When I try to create a box and whisker plot with more than 100 data points

Making a Boxplot Chart with precomputed values.

Hi. I made a basic boxplot chart on my web application based on the docs. By default, this plugin accepts an array of data being stored on the dataset. Do you have examples on how it accepts precomputed values (for the minimum, maximum, median, outliers) instead of processing everything on the client side?

I'm planning to compute the min, max, median etc... to the server side instead to make my application run a little bit faster. I am working on hundred thousands of data and passing over the individual data from the server to client is a very slow. I would appreciate you answer.

Thanks! :)

I have no idea how to style outliers

There doesn't appear to be any documentation on it and I have been trying outlierColor, outlierStylem outlierRadius on the top level context, the dataset and the data but nothing seems to work

Cannot register BoxAndWhiskers

I am using the current version of your library (4.2.2) and chart.js (4.3.0)

During Chart.Register(BoxAndWiskers) it fails with the error:

Argument of type 'typeof BoxAndWiskers' is not assignable to parameter of type 'ChartComponentLike'.
Type 'typeof BoxAndWiskers' is not assignable to type '{ [key: string]: ChartComponent; }'.
Index signature for type 'string' is missing in type 'typeof BoxAndWiskers'

Boxplot axis doesn't extend for precomputed outliers

When creating boxplot using precomputed values, the y axis doesn't extend for outliers.

To Reproduce

The following data shows the issue:

const boxplotData = {
  labels: ["outliers not shown"],
  datasets: [
    {
      label: "Dataset 1",
      borderWidth: 1,
      itemRadius: 2,
      itemStyle: "circle",
      itemBackgroundColor: "#000",
      outlierBackgroundColor: "#000",
      data: [
        {
          min: 1,
          q1: 2,
          median: 3,
          q3: 4,
          max: 5,
          // the graph does not extend enough to show these outliers
          outliers: [-5, 11]
        }
      ]
    }
  ]
};

I've created an example on codepen. The outliers are shown if you set the y scale explicitly by uncommenting lines 38 and 39.

Expected behavior

The graph should extend the axis for precomputed outliers when minStats: 'min' and maxStats: 'max' as it already does for non-precomputed values as seen in the first dataset in datastructures example.

Context

• Version: 4.2.8
• Browser: Chrome and Firefox

Outliers are drawn twice

see original at datavisyn/chartjs-chart-box-and-violin-plot#105

How to use in angular 14

I want to know how to use this in a angular project currently i am struggling to use it in a angular 14 project

How to set the horizontal boxplot flag

I saw that you have horizontal boxplot support, but how do i set the flag to true?

Option usage

Hello, I'm using the boxplot in Vanilla JS with the following code:

<script src="https://unpkg.com/chart.js@4"></script>
<script src="https://unpkg.com/@sgratzl/chartjs-chart-boxplot@4"></script>
<script>

    const boxplotData = {
        // define label tree
        labels: ['January'],
        datasets: [{
            label: 'Dataset 1',
            backgroundColor: 'rgba(255,0,0,0.5)',
            borderColor: 'red',
            borderWidth: 1,
            outlierColor: '#999999',
            padding: 10,
            itemRadius: 0,
            data: [
                [...]
            ],
            legend: {
                position: 'bottom',
            },
        }]
    };
    window.onload = () => {
        const ctx = document.getElementById("canvas").getContext("2d");
        window.myBar = new Chart(ctx, {
            type: 'boxplot',
            data: boxplotData,
            options: {
                indexAxis: 'y',
                responsive: true,
                legend: {
                    display: false,
                    position: 'top',
                },
                title: {
                    display: false,
                    text: 'Chart.js Box Plot Chart'
                },
            }
        });

    };

</script>

This is how it looks on the website:

I would like to do the following things and tried the options inside the documentation, but it did not work:

• Hide Dataset 1 and January
• Set a custom height and width for the canvas (it currently looks stretched out...)

How can I do that? The only parameter from options that seems to work is the indexAxis which works as intended. The other parameters don't work. I did not find parameters to set a custom height and width of the canvas.

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?

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);
        }

Error: "boxplot" is not a registered controller.

Hello, I'm trying to run Chart in VueJs component but get error.
Error: "boxplot" is not a registered controller.

Screenshots / Sketches

Context

• Version:
• chartjs-chart-box-and-violin-plot 8.6.0,
• chart.js: 3.6.2

Imports what I did in Vue component:

import Vue from 'vue';
import { Chart } from 'chart.js';
import 'chartjs-chart-box-and-violin-plot';
import ChartDataLabels from 'chartjs-plugin-datalabels'

What I do wrong?

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.

Screen.Recording.2022-05-16.at.9.52.41.PM.mov

I'm on 3.7.2

Thanks

How to add empty values in violin plot?

I am using violin chart (@sgratzl/chartjs-chart-boxplot 3.9.0). I am trying to show violins only for the X values that I have data.
Recently I was using chartjs-chart-box-and-violin-plot 3.0.0 and for the missing data I was passing null values. Now the chart is showing diamonds on the bottom of the chart like there is 0 value.

I tried with different empty values: null, [], undefined, NaN.

How to pass data when I have empty values or is there any option that I am missing? I don't want to show any violin or diamond in the columns without data.

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/]

How to plot split violin plot ?

Hi, I searching the lightweight tool to plot split violin, just like following screenshot in seaborn python package. Does this repo support to plot split violin now?

Screenshots / Sketches

The screenshot is from stackoverflow

Context

• Version: 4.2.7
• Browser: Edge

Additional context

None.

Sample datalimits does not work as intended

I have cloned and built this repo and tried to use the minStats options as described in the config section of the readme, but get an error of Cannot read properties of undefined (reading 'datasets').

I have tried to amend the code to change minStats and maxStats on the datasets themselves, or by setting the initial values for them within options.boxplot.datasets instead of directly within options.

To Reproduce

1. Clone repo and build
2. Open datalimits.html within the samples folder
3. Click Limit to whiskers
4. Check console for errors

Expected behavior

A change in the scales of the chart to be limited to the whiskers of the boxplot.

Boxplot overlaps with other chart types (ie. bar) by default - how to change that so the different types are side by side?

Hi there,

By default, chartjs behaves so that if you have multiple datasets with the same chart types (such as bar and bar, or boxplot and boxplot), they divide the category space between them and appear side by side. Boxplot + boxplot also behaves that way, however I'm building something that allows the addition of various datasets with different chart types and am having an issue where the boxplot overlaps bar charts instead of them being side by side.

I saw in the docs an example of the same behaviour, so it seems that it is perhaps intended, however I'd like to figure out how to make for example a bar and a boxplot appear side by side instead of overlapping. Could you point me in the right direction?

Example of how two datasets with type "bar" automatically appear side by side (desired behavior with boxplot and bar):

Current behavior with boxplot and bar

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

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!