Chart.js line chart

[hard phoenix]

I am trying to set up a line chart canvas using chart.js library
I don't posses JS knowledge, so I am coming to the support of ai in general coding for it
Currently I just want to initialise a chart to be shown on the page without any excessive modifications, but no matter what, I can't get it to actually render, instead of appearing as raw text data on the page upon a template call
Current pages involved:
https://thecelestialcaverns.miraheze.org/wiki/MediaWiki:Common.js
https://thecelestialcaverns.miraheze.org/wiki/MediaWiki:OreSpawnGraph.js
https://thecelestialcaverns.miraheze.org/wiki/Module:OreSpawnData
https://thecelestialcaverns.miraheze.org/wiki/Module:OreSpawnGraph
https://thecelestialcaverns.miraheze.org/wiki/Template:OreSpawnGraph
https://thecelestialcaverns.miraheze.org/wiki/TestPage
Main thing to mention is that I never really worked with js initialisation on mediawiki in the first place, so maybe I am missing something crucial here
Was also looking for any examples of line chart libraries usage made with js on other wikis, but couldn't find anything for reference at all besides the non-js approach using graph extension, so I am just stuck here with the idea without being able to implement it due to lack of knowledge

the only string is this

[west arrow]

matomo.js is a tracking script, doesn't have anything to do with chart.js
just as a fyi

[cobalt kernel]

I think this error is what's causing chart.js to not work on your wiki

If this was HTML I'd try adding type="module" to the script tag, but I'm not sure what the equivalent of this would be when using mw.loader

[hard phoenix]

everything leads to <canvas> tags just not loading or something

<script> apparently as well

[woeful rivet]

I encountered this issue before. I got around it using 2 scripts. The first script adds an import map to the page and then inserts a script tag whose type is module and src is the main script. The second script does the real work.

Here's a working example. Drop the following js into https://meta.miraheze.org/wiki/User:PetraMagna/sandbox?oldid=473508

await import('https://cdn.jsdelivr.net/npm/[email protected]/dist/canvasjs.min.js').then(
    () => { 
        console.log(CanvasJS);
        let chart = new CanvasJS.Chart("chartContainer", {
            theme: "light1", // "light2", "dark1", "dark2"
            animationEnabled: false, // change to true        
            title:{
                text: "Basic Column Chart"
            },
            data: [
            {
                // Change type to "bar", "area", "spline", "pie",etc.
                type: "column",
                dataPoints: [
                    { label: "apple",  y: 10  },
                    { label: "orange", y: 15  },
                    { label: "banana", y: 25  },
                    { label: "mango",  y: 30  },
                    { label: "grape",  y: 28  }
                ]
            }
            ]
        });
        chart.render();
    }
);

[hard phoenix]

Thank you so much, finally getting somewhere

[hard phoenix]

[woeful rivet]

@hard phoenix I just realized that I provided the js snippet for a different library. I've no idea why I stumbled upon canvasjs which is not maintained for many years. Maybe because it has canvas in the name.
https://meta.miraheze.org/wiki/Help%3AChart#See_also has a proper js snippet for Chart.js, though at this point you might be too deep in the CanvasJs rabbit hole to switch easily.

[hard phoenix]

Using only chartjs since then

I tried working with other libs but they all were worse than chartjs

[woeful rivet]

Oh nice! Happy to hear that I didn't lead you astray.