Cannot read property 'minBarLength' of undefined.

[gkane6]

Hi everyone! Could you guide me on how to use this with reactjs.

in chart.js file

import React, { useEffect } from 'react';
import { Chart as Graph } from 'chart.js';
import 'chartjs-chart-box-and-violin-plot/build/Chart.BoxPlot.js';

export default React.memo(function Chart({ data, options, type }) {
    const chartRef = React.useRef(null);

    useEffect(() => {
        const { current } = chartRef;
        const chartContext = current.getContext('2d');

        new Graph(chartContext, {
            type,
            data,
            options,
        });
    }, [chartRef, data, options, type]);

    return (
        <>
            <canvas id={`${type}-graph`} ref={chartRef} className="Chart" />
        </>
    )})

In ChartBoxPlot.js file

import React from 'react';
import Chart from  './Chart';

const ChartBoxPlot = ({ data, options }) => {
    return (
          <div>
            <div className="Bar">
                <Chart data={data} options={options} type="boxplot" />
            </div>
        </div>);
};
export default ChartBoxPlot;`

This is what I get in the console

Cannot read property 'minBarLength' of undefined
TypeError: Cannot read property 'minBarLength' of undefined
    at ChartElement.calculateBarValuePixels (http://localhost:64876/vendors~main.88ed1bbe4abec7a73360.bundle.js:43171:30)
    at ChartElement._updateElementGeometry (http://localhost:64876/vendors~main.88ed1bbe4abec7a73360.bundle.js:43066:20)
    at ChartElement._updateElementGeometry (http://localhost:64876/vendors~main.88ed1bbe4abec7a73360.bundle.js:55359:62)
    at ChartElement.updateElement (http://localhost:64876/vendors~main.88ed1bbe4abec7a73360.bundle.js:43051:6)
    at ChartElement.updateElement (http://localhost:64876/vendors~main.88ed1bbe4abec7a73360.bundle.js:55236:53)
    at ChartElement.update (http://localhost:64876/vendors~main.88ed1bbe4abec7a73360.bundle.js:43024:7)
    at ChartElement._update (http://localhost:64876/vendors~main.88ed1bbe4abec7a73360.bundle.js:41960:6)
    at ChartElement.reset (http://localhost:64876/vendors~main.88ed1bbe4abec7a73360.bundle.js:41862:8)
    at http://localhost:64876/vendors~main.88ed1bbe4abec7a73360.bundle.js:47721:16
    at Object.each (http://localhost:64876/vendors~main.88ed1bbe4abec7a73360.bundle.js:40354:9)

[sgratzl]

Hi, can you post examples values that you used for the properties? especially: data and options

[gkane6]

Hello @sgratzl , I used same as your codepen example https://codepen.io/sgratzl/pen/QxoLoY

[sgratzl]

hm. I currently playing with https://codesandbox.io/s/runtime-https-xqyve and I have no problem

[gkane6]

[sgratzl]

what versions of the plugin and chart.js are you using?

[diego-marinic]

I have the same problem, currently using Chart.js 2.9.1 and release 2.1.0 of this plugin
CodePen example (https://codepen.io/sgratzl/pen/QxoLoY) breaks when updating the Chart.js reference to 2.9.1 so probably some change in this version breaks compatibility.

[sgratzl]

good catch. I filled a PR which should fix it. In the meanwhile you should be able to install the branch directly as in

npm i datavisyn/chartjs-chart-box-and-violin-plot#sgratzl/bugfix

[gkane6]

what versions of the plugin and chart.js are you using?

"chart.js": "^2.9.1", "chartjs-chart-box-and-violin-plot": "^2.1.0",

[sgratzl]

thx, it already has been resolved. I don't know why codesandbox/parcel insisted on using 2.8.0 even it breaks with 2.9.1

[gkane6]

Hi! I installed that branch, it fixed the error but data is not showing now.🤷🏿‍♀️