Error in Storybook - LinearScaleBase is not defined

[mario-iliev]

Expected behavior

No bug of not used features.

Current behavior

Hey guys, After updating from 3.9.1 to 4.0.1 I receive error in our builded Storybook (runtime not on build):

Uncaught ReferenceError: LinearScaleBase is not defined
    at ./node_modules/chart.js/dist/chart.js (5827.4a9359bf.iframe.bundle.js:2:4868810)
    at __webpack_require__ (runtime~main.bfd8d355.iframe.bundle.js:1:387)
    at ./src/components/common/DoughnutChart.js (main.ee1fcde1.iframe.bundle.js:1:1188558)

• Running locally I don't have such error.
• LinearScaleBase is not something I use anywhere in the codebase

Any suggestions?

Reproducible sample

None

Optional extra steps/info to reproduce

No response

Possible solution

No response

Context

No response

chart.js version

v4.0.1

Browser name and version

No response

Link to your project

No response

[LeeLenaleee]

Please add a reproducable sample as being required by the issue template

[Burakkepuc]

When I try to deploy my vuejs app vercel or netlify, I get same error.

Uncaught ReferenceError: LinearScaleBase is not defined at 4403 (chart.js:10124:27) at e (bootstrap:19:32) at 2564 (app.815610c6.js:1:2359) at e (bootstrap:19:32) at startup:4:87 at e.O (chunk loaded:25:12) at startup:5:43 at app.815610c6.js:1:6368

[Arxi]

Same here, using Vue 3 + Laravel + Mix with chart.js 4.1.1 (tried 4.0.1 as well) and vue-chartjs 5.1.0 (tried 5.0.1 too). It only happens in production build, not in dev build. Unfortunately I currently don't have a reproducible sample, and I'm not sure how to provide one, since it happens in production build only - maybe it's webpack related?

edit: for what it's worth, this is all the code I use from chartjs and vue-chartjs:

<template>
    <Doughnut :data="data" :options="options" />
</template>

<script setup>
import { Chart as ChartJS, ArcElement, Tooltip } from 'chart.js';
import { Doughnut } from 'vue-chartjs';

ChartJS.register(ArcElement, Tooltip);

const data = {
    labels      : ["a", "b", "c"],
    datasets: [{
        backgroundColor : ['#FF84CC', '#8770EF', '#FFBA4B'],
        data            : [33, 34, 33]
    }]
}

const options = {
    cutout              : "60%",
    responsive          : true,
    maintainAspectRatio : true,
    elements            : {
        arc             : {
            borderWidth : 0
        }
    },
    plugins             : {
        tooltip         : {
            padding     : 6,
            boxPadding  : 4,
            callbacks   : {
                label   : context => `${context.formattedValue}%`
            }
        }
    }
}
</script>

[duyn-stanford]

I had this same issue when I only had a Doughnut chart in my project but later added a Line Chart, which required registering LinearScale (along with CategoryScale, PointElement, and LineElement) and it worked thereafter. Try registering LinearScale first to see if that addresses your problem and add some of these other Line Chart components if it's still not working for you.

[Arxi]

thank you @duyn-stanford for this suggestion. I imported LinearScale, and also had to register it with Chart.js, but now the production build works. Not exactly a "clean" solution, but certainly works, so much appreciated!

import { Chart as ChartJS, ArcElement, Tooltip, LinearScale } from 'chart.js';
ChartJS.register(ArcElement, Tooltip, LinearScale);

[daveshanley]

I had this same issue when I only had a Doughnut chart in my project but later added a Line Chart, which required registering LinearScale (along with CategoryScale, PointElement, and LineElement) and it worked thereafter. Try registering LinearScale first to see if that addresses your problem and add some of these other Line Chart components if it's still not working for you.

Perfect answer.

[ePlayi]

Had the same issue but the trick suggested from @duyn-stanford didnt solved it for me. Its not working when I call the domain directly (example.com) but it's working when I call the domain with a path (example.com/something). I'm using vue-router. Also i tried to move the import and register statement from the component into my main.js file but it gives me the same error.

[Eishfaq]

I got the same problem, I solved this issue by registering the LinearScale

import { Chart as ChartJS, ArcElement, Tooltip, Legend, LinearScale } from 'chart.js' ChartJS.register(ArcElement, Tooltip, Legend, LinearScale);

[rubinlinux]

I think this has something to do with webpack tree-shaking. In my environment, 'run build' would create code that fails with this error, but 'run watch' would create code that works. I suspect the difference is that the 'build' (prod) version is configured to try and do more aggressive tree shaking.

My setup (symfony with vuejs being built with encore) is too complex for a simple test case here though. But does doughnut declare its dependency on linearScale properly?