Skip to content

Uncaught TypeError: Cannot read property 'y' of undefined #6

@sergotail

Description

@sergotail

No chart drawn, exception thrown.

To Reproduce
I use Laravel Mix to build js assets. Used libs (package.json dependencies):

"dependencies": {
        "@sgratzl/chartjs-esm-facade": "^3.0.0-alpha.21",
        "@ttskch/select2-bootstrap4-theme": "^1.3.4",
        "bootstrap": "4.5.3",
        "chart.js": "^3.0.0-beta.11",
        "chartjs-chart-wordcloud": "^3.0.0-beta.9",
        "datatables.net-bs4": "^1.10.23",
        "datatables.net-buttons-bs4": "^1.6.5",
        "datatables.net-colreorder-bs4": "^1.5.3",
        "datatables.net-fixedcolumns-bs4": "^3.3.2",
        "datatables.net-fixedheader-bs4": "^3.1.8",
        "datatables.net-keytable-bs4": "^2.6.0",
        "datatables.net-responsive-bs4": "^2.2.7",
        "datatables.net-rowgroup-bs4": "^1.1.2",
        "datatables.net-rowreorder-bs4": "^1.2.7",
        "datatables.net-scroller-bs4": "^2.0.3",
        "datatables.net-searchbuilder-bs4": "^1.0.1",
        "datatables.net-searchpanes-bs4": "^1.2.2",
        "datatables.net-select-bs4": "^1.3.1",
        "jqcloud2": "^2.0.3",
        "jquery": "3.5.1",
        "jszip": "^3.6.0",
        "owl.carousel": "2.3.4",
        "pdfmake": "^0.1.70",
        "popper.js": "1.16.1",
        "select2": "^4.0.13",
        "wordcloud": "^1.1.2"
    }

HTML file:

<div id="container" style="width: 75%">
    <canvas id="test-canvas"></canvas>
</div>

JS file, composed with webpack:

import { WordCloudChart } from 'chartjs-chart-wordcloud';
import { Chart, LinearScale } from 'chart.js';

Chart.register(LinearScale);

const words = [
            { key: 'word', value: 10 },
            { key: 'words', value: 8 },
            { key: 'sprite', value: 7 },
            { key: 'placed', value: 5 },
            { key: 'layout', value: 4 },
            { key: 'algorithm', value: 4 },
        ];

const data = {
    labels: words.map((d) => d.key),
    datasets: [
        {
        label: '',
        data: words.map((d) => 10 + d.value * 10),
        },
    ],
};

new WordCloudChart(document.getElementById('test-canvas').getContext('2d'), {
    data: data,
    options: {
        title: {
            display: true,
            text: 'Chart.js Word Cloud',
        },
    },
});

Exception:
image

Place in code (i tried to use available fields of ctx object, but this leads to another error with fit property somewhere):
image

  • Version: 3.0.0-beta.9
  • Browser: Google Chrome 88.0.4324.190 (64-bit)

Metadata

Metadata

Assignees

No one assigned

    Labels

    bugSomething isn't working

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions