Delivery Methods

[peterthomson]

Some notes and examples of installation and delivery methods:

1. CDN
2. Binary
3. npm

[osbornemj]

I'm not sure whether this forum is intended for questions about how to configure Laravel for these delivery methods, but if it is, here is my question.

I ran
npm install chart.js
which worked fine.

In config/chartjs.php I have
'version' => 4
and
'delivery' => 'npm'
and in bootstrap.js I have

import Chart from 'chart.js/auto';
window.chart = Chart;

But the first example on https://https://github.com/icehouse-ventures/laravel-chartjs yields

statistics:174 Uncaught ReferenceError: Chart is not defined
    at statistics:174:40
    at HTMLDocument.<anonymous> (statistics:182:11)

The only combination of options under which the chart displays is 'delivery' => 'CDN' and 'version' => 2. Is the example only for version 2 of Chartjs? (I studied the lengthy Chart.js upgrade guides, and I couldn't see anything that changed between versions 2 and 4 that could be relevant to the example.) Why isn't 'delivery' => 'npm' working? --- what am I missing?

[peterthomson]

Thanks for spotting that. The example charts were configured for Chart JS version 2. For Chart JS version 4 to work the example Line chart needs fill => false and the example Bar chart needs the Y axis to have beginAtZero => true. I've updated the examples in the Readme and also in the Demo Application. Have a go and let me know if the updated examples work for you.

[osbornemj]

Thank you --- the modified examples work perfectly with 'delivery; => 'CDN' and 'version' => 4 in the chartjs.php config file.

Can you give instructions on how to use your package with npm in Laravel? Your readme file, in the section "NPM (Recommended)", gives a link to a page on the Chartjs website, but regarding npm that page only gives a link to the page https://www.chartjs.org/docs/latest/getting-started/installation.html, which just says to run npm install chart.js. That's the easy part! After doing that, you need to tell Laravel how to find chartjs, and the Chartjs page doesn't talk about that. Given that your package is specifically for Laravel, could you add some notes about it? I tried putting

import Chart from 'chart.js/auto';
window.chart = Chart;

in bootstrap.js, but that does not work --- it generates "Uncaught ReferenceError: Chart is not defined". What do I need to add to use the 'delivery' => 'npm' method?

Thank you for your package. I have used fx3costa/laravelchartjs extensively, and it is wonderful to have a robust, maintained alternative.

[peterthomson]

Hi there,

You are correct that the npm setup is harder than it should be. The setup under Laravel Mix was so common that many tutorials and instructions existed. That setup was also very robust because it built a separate file and just moved it to your public directory so you could link to it easily. Vite (the new build pipeline for Laravel is a little harder). The steps to get it working now seem to be:

1. Install the dependancy files using the node package manager using terminal in the folder for your app, this should add the dependancy to your package.json:

npm install chart.js

2. Add the chart.js import into your app.js file using the auto method so that all files are available and make the Chart object available to all scripts on the page using the window declaration:

import Chart from 'chart.js/auto';
window.Chart = Chart;

3. Compile the assets into your public folder using Vite in dev mode or in build mode (npm run dev or npm run build):

npm run build

4. Add the Vite script tag to the top of your base page template such as app.blade.php in the header tag in the same place as your meta, css and other script tags:

@vite(['resources/js/app.js'])

5. Switch the package delivery method to npm in chartjs.php

'delivery' => 'npm'

Sorry it took a while to find a solution. I've updated the Demo app here: https://github.com/icehouse-ventures/laravel-chartjs-demo Have a go with the updated installation instructions and let me know your thoughts. If they work for you then we should probably add them to the main Readme as you're correct that it's weird to leave out the hardest and most important part of actually setting up Chart.js using the 'recommended' method.

[osbornemj]

Yes, those instructions work perfectly --- thank you! I think it would definitely be a good idea to add them to the main Readme file.

[cheekyboots]

yes please add them to the main readme file! i had to hunt to find this page