Adding chartjs to project without utilizing npm, bower, or CDN

Currently, I am developing a graph page as part of a project. However, my client has specified that I cannot utilize npm, bower or CDN for this task. This constraint leads me to wonder how I can incorporate the chartjs library without relying on these traditional options.

To tackle this challenge, I attempted the following approach:

var Chart = require(['../chartjs/Chart.js']);
var ctx = document.getElementById("bar-chart");
var myChart = new Chart(ctx, {
    type: 'bar',
    data: {
        labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
        datasets: [{
            label: '# of Votes',
            data: [12, 19, 3, 5, 2, 3],
            backgroundColor: [
                'rgba(255, 99, 132, 0.2)',
                'rgba(54, 162, 235, 0.2)',
                'rgba(255, 206, 86, 0.2)',
                'rgba(75, 192, 192, 0.2)',
                'rgba(153, 102, 255, 0.2)',
                'rgba(255, 159, 64, 0.2)'
            ],
            borderColor: [
                'rgba(255,99,132,1)',
                'rgba(54, 162, 235, 1)',
                'rgba(255, 206, 86, 1)',
                'rgba(75, 192, 192, 1)',
                'rgba(153, 102, 255, 1)',
                'rgba(255, 159, 64, 1)'
            ],
            borderWidth: 1
        }]
    },
    options: {
        scales: {
            yAxes: [{
                ticks: {
                    beginAtZero: true
                }
            }]
        }
    }
});

Nevertheless, I encountered the following error message during my implementation:

Uncaught Error: Script error for "../chartjs/Chart.js".

Could you kindly assist me in identifying any potential steps that may have been overlooked?

Answer №1

Give this a shot

import data from './data';
console.log(data);

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

How do I repeatedly invoke a function in JQuery that accepts two different arguments each time?

I have a collection of folders, each containing various images. The number of pictures in each folder ranges from 8 to 200. Folders are numbered from 1 to 20 and the images within them are also labeled numerically. My goal is to aggregate all these images ...

Can you provide tips on how to realign an image in a contenteditable DIV in Internet Explorer?

When I have a div with the attribute contenteditable="true" in IE versions 7, 8, and 9, and then click a button to insert an image using the document.execCommand('insertImage') method, the image is successfully inserted. However, the inserted ima ...

Querying with mongodb using the $or operator yields a single result

I need help querying my MongoDB using JavaScript as I am only getting one result when I should be utilizing the $or operator. The frontend sends a string, which I then split by spaces to search for matches in the database based on skills, location, and na ...

Dealing with nested file includes in PHP and passing values to a JavaScript function

When the button is clicked on login.php, it triggers the execution of redirect.php. This redirect.php file carries out Twitter authentication, which includes invoking another file that eventually calls index.php. index.php provides the result in the form ...

Guide on how to start the Bootstrap 4.6 collapse feature using JavaScript

The Bootstrap 4.6 documentation states that the collapse menu can be enabled/initialized using either data- attributes or JavaScript. It is assumed that data-target is still required to link a button to the collapsible element. This leaves us with data-tog ...

The function window.open has been disabled on codepen.io site

My dilemma involves a button designed to open a random Wikipedia page. While the code works perfectly in the CodePen editor, I encounter issues when opening it in full-page view. The problem arises when the log displays 'window.open is disabled'. ...

Encountered an error with symbol '@' while utilizing ES6 decorators

I have recently set up a React project and now I'm attempting to integrate MobX into it. This requires using decorators such as: @observable However, when I try to implement this, I encounter the following error: https://github.com/mobxjs/mobx Mod ...

Adjust the class based on the model's value in AngularJS

items = {'apple', 'banana', 'lemon', 'cat', 'dog', 'monkey', 'tom', 'john', 'baby'} html <div class="variable" ng-repeat="item in items">{{item}} </div> ...

NextJS is throwing an error: The prop `href` in `<Link>` should be a `string` or `object`, but it received `undefined` instead

I've encountered an issue while trying to integrate a header section from a GatsbyJS project into my NextJS project. The error message I'm receiving is: "Error: Failed prop type: The prop href expects a string or object in <Link>, but ...

Checking for collisions among numerous elements in JS: An insightful guide

I have created 40 images with random positions, however, some of them collide in certain cases. My question is how to prevent collisions and assign new positions if they do occur? Below is my code along with comments for clarity. $( document ).ready(fun ...

Using React and Redux to update a property in the state with a modified array

I am currently developing a React app and utilizing Redux for state management. Below is the code snippet I am working with: menu.actions.js: import { apiUrl, apiConfig } from '../../util/api'; import { ADD_CATEGORY, GET_MENU } from './men ...

VueJS throws an error indicating that the object cannot be extended

I have encountered an issue while trying to update the promo object by adding a new field called colspan. Unfortunately, I am getting this error: uncaught (in promise) TypeError: Cannot add property colspan, object is not extensible at eval (eval at ...

Creating a dynamic HIIT program with an autoplay feature for videos and images, using a jQuery/JavaScript slider "playlist" with the backend support of

I am currently exploring the idea of developing a countdown timer that incorporates videos. In order for this timer to function effectively, it must be able to retrieve data such as countdown time, break time, number of sets, and video (or images if no vid ...

Connect the scroll wheel and then proceed to scroll in the usual way

There are two div elements with a height and width of 100%. One has the CSS property top:0px, while the other has top 100%. I have implemented an animation that triggers when the mousewheel is used to scroll from one div to the other. The animation functi ...

react-native-track-player failing to play song requested from Express server

I set up an expressjs server with a 'songs' route that serves .mp3 files. Here is the code for the Songs Route: import express from "express" const path = require("path") const router = express.Router() ... router.get(" ...

Show text on Canvas when hovering

Recently, I've been working on a project inspired by this example where I made adjustments to the code in order to display it on a canvas. var canvas = document.getElementById('nokey'); var ctx = canvas.getContext('2d'); ctx ...

What is the best way to stop a vimeo video within a dynamic iframe?

I have a collection of items that trigger the loading of an iframe when clicked. I want to ensure that only one iframe is open at a time, and when a new one is opened, the previous one should pause if it is playing. Although I have attempted to implement ...

The timing of jQuery's .load function appears to be off, catching us by surprise

My current challenge involves loading returned html from an .aspx page through AJAX, but facing a timing issue with a click event that needs to occur before executing some essential tasks. Specifically, the process begins when a user types in a text field ...

What is the process for deleting an event in Vue?

My Vue instance currently includes the following code: async mounted () { document.addEventListener('paste', this.onPasteEvent) }, beforeDestroy () { document.removeEventListener('paste', this.onPasteEvent) }, methods: { onPasteEv ...

Display alert only when focus is lost (on blur) and a dropdown selection was not made

Utilizing Google Maps Places for autocompletion of my input, I am aiming to nudge the user towards selecting an address from the provided dropdowns in order to work with the chosen place. A challenge arises when considering enabling users to input address ...