When I import the plugin while using this with react-chartjs-2 i get the error below

Uncaught Error: "barWithErrorBars" is not a registered controller.
    at Registry._get (chart.esm.js:4916:13)
    at Registry.getController (chart.esm.js:4862:17)
    at Chart.buildOrUpdateControllers (chart.esm.js:5610:42)
    at Chart.update (chart.esm.js:5644:33)
    at new Chart (chart.esm.js:5426:12)
    at renderChart (chart.tsx:42:24)
    at chart.tsx:98:5
    at invokePassiveEffectCreate (react-dom.development.js:23487:20)
    at HTMLUnknownElement.callCallback2 (react-dom.development.js:3945:14)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:3994:16)

looking through the getController function i see that these are registered:

pointWithErrorBar plugin
barWithErrorBars plugin
barWithErrorBar plugin
pointWithErrorBar plugin
barWithErrorBars plugin
barWithErrorBar plugin
pointWithErrorBar plugin
barWithErrorBars plugin
barWithErrorBar plugin
barWithErrorBars controller throws

To Reproduce

that's a rough code (not complete, but the essentials are here)

import { ChartData, ChartOptions, Point, Chart as ChartJS, BarControllerChartOptions } from 'chart.js';
import {
  BarWithErrorBar,
  BarWithErrorBarsController,
  PointWithErrorBar,
  BarWithErrorBarsChart,
} from 'chartjs-chart-error-bars';

// these all registers i tries to add
ChartJS.register(
  PointWithErrorBar,
  BarWithErrorBarsController,
  BarWithErrorBar,
  BarWithErrorBarsChart,
  LinearScale,
  CategoryScale,
  BarElement,
  LinearScale,
  PointElement,
  LineElement,
  TimeScale,
  CategoryScale,
  Title,
  Tooltip,
  Legend,
  Decimation,
  Tooltip,
  Legend,
  annotationPlugin
);

const options = {
            annotations,
            scales: {
              x: {
                type: 'time',
                ticks: {
                  source: 'auto',
                },
              },
              y: {
                suggestedMin: 0,
              },
            },
          };

const getChartDatasets = (data:IErrorBarXYDataPoint[]): ChartData<'barWithErrorBars'> => ({
  labels: data.map(({ x }) => x),
  datasets: [
    {
      data,
    },
  ],
});


const BarChartWithErrors = () => {
return <Chart
        type="barWithErrorBars"
        data={chartDatasets}
        options={chartOptions}
        plugins={[chartUtils.backgroundPlugin]}
      />
}

Expected behavior after registering BarWithErrorBarsController i expect it to not throw saying it's not registered

Screenshots

Context

• Version: latest
• Browser: chrome latest

    "chart.js": "3.9.1",
    "chartjs-adapter-dayjs-3": "1.2.3",
    "chartjs-chart-error-bars": "3.9.0",
    "chartjs-plugin-annotation": "1.4.0",
    "react-chartjs-2": "4.3.1",

Hi Team, We are facing issue to create Line chart with error bars(lineWithErrorBars). We are getting issue with canvas context issue s undefined, Where same configuration working with barWithErrorBars. So if possible can you provide the reference code for lineWithErrorBars . We are using chart js 3.6.0 version and chartjs-chart-error-bars/v/3.6.0 version. above mentioned npm packges we are using with angular 12.

Thanks, M.dev

I,m using lineWithErrorBars, and when I try to set elements.point configs both locally on chart object and through Chart.defaults it seems that desired configuration does not apply.

To Reproduce

Chart.defaults.elements.point.radius = 10

//or

new Chart(document.getElementById('canvas').getContext('2d'), {
            type: 'lineWithErrorBars',
            options: {
                elements: {
                    point:{
                        radius: 10
                    }
                }
            },
            data: {
                labels: labels,
                datasets: datasets
            },
        });

Context

• Version: [email protected], [email protected]
• Browser: Chrome v97.0

Thank you in advance for your great work.

Hello,

could you add a styling example in the documentation ? I'm not fluent using ChartJS and I didn't manage to style error bars, where should I put the configuration options ?

When I set animation: false on line and scatter charts, error bars aren't drawn.

To Reproduce

1. Visit the CodePen: https://codepen.io/mossymaker/pen/zYRmwPP2.
2. Toggle the animation option.

Expected behavior

Error bars render without animation.

Context

• Version: chartjs@3, chartjs-chart-error-bars@3
• Browser: Safari 15.5; also happens on Chrome

Additional context

Bumps ini from 1.3.5 to 1.3.7.

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.

Hi, If I create a chart with error bars and then update the data with a simple array of values the error bars still show: https://codepen.io/dream_falcon/pen/OJveqKJ

Is this a bug or I'm missing something? I don't want to destroy and redraw the chart because that is causing flickering in my react app.

I'm trying to remove the y-label axes with the "scatterWithErrorBars". I tried some solution I found on SO, but none of them worked, so was thinking it was because this was more specific to the errorBar code?

This is what it looks like now:

This is what I want it to look like:

here's my code:

function generateErrorBarChart(min, max, meas, paramName, id) {
    let minimum = parseFloat(toFixed(min, 2));
    let maximum = parseFloat(toFixed(max, 2));
    let measured = parseFloat(toFixed(meas, 2));

    if (maximum < minimum && maximum == 0) {
        maximum = minimum + 1000;
    }

    new Chart(document.getElementById(id).getContext('2d'), {
        type: 'scatterWithErrorBars',
        options: options,
        data: {
            labels: [paramName],
            datasets: [
                {
                    data: [
                        {
                            x: minimum,
                            y: 0,
                            xMin: minimum,
                            xMax: maximum,
                        },
                        {
                            x: maximum,
                            y: 0,
                            xMin: minimum,
                            xMax: maximum,
                        },
                        {
                            x: measured,
                            y: 0,
                        }
                    ],
                    fill: true,
                    borderColor: 'rgb(255, 0, 0)',
                    tension: 0.8
                },
            ]
        },
    });
}

var options =
{
    plugins: {
        legend: {
            display: false
        }
    }
};


function toFixed(value, precision) {
    var precision = precision || 0,
        power = Math.pow(10, precision),
        absValue = Math.abs(Math.round(value * power)),
        result = (value < 0 ? '-' : '') + String(Math.floor(absValue / power));

    if (precision > 0) {
        var fraction = String(absValue % power),
            padding = new Array(Math.max(precision - fraction.length, 0) + 1).join('0');
        result += '.' + padding + fraction;
    }
    return result;
}

I am trying to include the library in my application built in vue, but when I try to add the graphic with type: "barWithErrorBars" I get the mentioned error.

I have these versions in my package.json: "chart.js": "^ 2.9.4", "chartjs-chart-error-bars": "^ 1.2.1", "vue": "^ 2.5.2",

This is my component:

<template>
  <canvas id="canvas"></canvas>
</template>

<script>
import Chart from 'chart.js'
export default {
  name: 'ErrorBar',
  mounted () {
    let chart = new Chart(document.getElementById('canvas').getContext('2d'), {
      type: 'barWithErrorBars',
      data: {
        labels: ['A', 'B'],
        datasets: [
          {
            data: [
              {
                y: 4,
                yMin: 1,
                yMax: 6
              },
              {
                y: 2,
                yMin: 1,
                yMax: 4
              }
            ]
          }
        ]
      },
      options: {
        scales: {
          yAxes: [
            {
              ticks: {
                beginAtZero: true
              }
            }
          ]
        }
      }
    })
    return chart
  }
}
</script>

<style scoped>
canvas {
  -moz-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
}
</style>

Am I doing something wrong?

Could you please help me?

Thanks!

Describe the bug When I try to use chartjs error bar library on ec2 (centOS) in AWS with IE11, I get the following error: Object doesn't support property or method 'assign'. But I do not get this issue with Google Chrome or Firefox.

To Reproduce Steps to reproduce the behavior:

1. Go to '...'
2. Click on '....'
3. Scroll down to '....'
4. See error

Expected behavior A clear and concise description of what you expected to happen.

Screenshots If applicable, add screenshots to help explain your problem.

Desktop (please complete the following information):

• OS: [e.g. iOS]
• Browser [e.g. chrome, safari]
• Version [e.g. 22]

Smartphone (please complete the following information):

• Device: [e.g. iPhone6]
• OS: [e.g. iOS8.1]
• Browser [e.g. stock browser, safari]
• Version [e.g. 22]

Additional context Add any other context about the problem here.

When I use a linear scale and a lineWithErrorBars chart, nothing is drawn. Works fine for category scales.

To Reproduce

1. Navigate to https://codepen.io/mossymaker/pen/zYRmwPP2.

Expected behavior

Line with error bars is drawn on a linear scale.

Screenshots

Context

• Version: 3
• Browser: Safari 15.6.1

Additional context

There's a comment in the Pen to toggle between the scale types. Here's the config I used:

new Chart(document.getElementById('canvas').getContext('2d'), {
  type: 'lineWithErrorBars',
  data: {
    datasets: [
      {
        data: [
          {
            x: 1,
            y: 4,
            yMin: 1,
            yMax: 6,
          },
          {
            x: 2,
            y: 2,
            yMin: 1,
            yMax: 4,
          },
        ],
      },
    ],
  },
  options: {
    animation: false,
    scales: {
      // x: {
      //   type: 'category',
      //   labels: ['A', 'B']
      // },
      x: { type: 'linear'}
    },
  },
});