Step-by-step guide for setting up chartjs on Laravel 6 using npm

Question

Step-by-step guide for setting up chartjs on Laravel 6 using npm

Can anyone guide me on how to properly install and integrate [email protected] in my laravel application?

Currently, I am using cdn links, but I want to avoid that in the future.

List of cdn links being used:

    <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.22.2/moment.min.js"</script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="d5b6bdb4a7a1bfa6f8b6bdb4a7a1f8a1a7b0b0b8b4a595e5fbe7fbe6">[email protected]</a>"></script>

Approach I took:

Installed chartjs package

npm i <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="96f5fef7e4e2b8fce5d6a4b8afb8a2">[email protected]</a>

Added this line in webpack.mix.js file:

mix.copy('node_modules/chart.js/dist/chart.js', 'public/chart.js/chart.js');

Executed this command in the terminal:

npm run dev

Included the script tag in the blade where the chart will be displayed:

<script src="{{ asset('chart.js/chart.js') }}"></script>

javascript laravel npm chart.js laravel-charts

Answer 1

Answer №1

Begin by installing the necessary package:

npm install chart.js

Create a new file, perhaps named /resources/js/mychart.js:

import Chart from 'chart.js/auto';

let ctx = document.getElementById('myChart').getContext('2d');
let myChart = new Chart(ctx, {
    // ...
});

In your /resources/js/app.js file, include the following code snippet at the top:

import './mychart.js';

Next, execute the command below to compile your JavaScript into a single file:

npm run dev

Laravel Mix should already have a line for compiling the app.js file.

From now on, whenever you reference /public/js/app.js, your chart will also be incorporated.

<script src="{{ mix('/js/app.js') }}"></script>

If you prefer to have a separate file, update your webpack.mix.js as shown below:

mix.js('/resources/js/chart.js', 'public/js');

Don't forget to remove it from the imports in your /resources/js/app.js file.

Answer 2

Begin by installing the necessary package:

npm install chart.js

Create a new file, perhaps named /resources/js/mychart.js:

import Chart from 'chart.js/auto';

let ctx = document.getElementById('myChart').getContext('2d');
let myChart = new Chart(ctx, {
    // ...
});

In your /resources/js/app.js file, include the following code snippet at the top:

import './mychart.js';

Next, execute the command below to compile your JavaScript into a single file:

npm run dev

Laravel Mix should already have a line for compiling the app.js file.

From now on, whenever you reference /public/js/app.js, your chart will also be incorporated.

<script src="{{ mix('/js/app.js') }}"></script>

If you prefer to have a separate file, update your webpack.mix.js as shown below:

mix.js('/resources/js/chart.js', 'public/js');

Don't forget to remove it from the imports in your /resources/js/app.js file.

Step-by-step guide for setting up chartjs on Laravel 6 using npm

Answer №1

Similar questions

Error message "MODULE_NOT_FOUND" appears when using Next.js and React together

Obtaining specific data from the forEach iteration, post-click event with JavaScript

"Despite modifying the ID in the response data of Angular MongoDB, the request data ID remains unchanged

A technique, such as regular expressions, can be used to detect the quantity of newline characters in the text entered by the user in a text area

Transferring information from an online platform onto pre-arranged sheets for hard copy

Error: The last line is missing a trailing comma

Guide on invoking a JavaScript function within a jQuery upon a specific event, such as clicking a hyperlink

Adjusting hyperlinks placement based on window size changes using jQuery

Guide to waiting for API responses with redux-saga

I need three buttons, but I only want one to be active at a time. When one button is clicked and becomes active

Experience a dynamic D3 geometric zoom effect when there is no SVG element directly underneath the cursor

Utilizing D3 for translation by incorporating data from an array within d3.js

Retrieving the initial entry from a JavaScript ES2015 Map

Exploring the Function Scope within ViewModel

Laravel is failing to send a response when trying to pass a PHP variable using Ajax

Unique name for the transition animation on SSR-Nuxt page transitions

TypeScript is unaware that a component receives a necessary prop from a Higher Order Component (HOC)

What steps should I take to resolve the problem with accessing Mongodb?

When attempting to run Protractor, an error occurs indicating that the module '../built/cli.js' cannot be located

VSCode prioritizes importing files while disregarding any symbolic links in order to delve deeper into nested node