"Exploring a New Generation of Angular Chart Libraries in Version

I've been considering upgrading my angular project from version 17 to 18.

Currently, I'm utilizing the Plotly.js-dist-min library for creating graphs.

However, during the project build (ng build), I've encountered an issue where the plotly.js library doesn't optimize properly due to using commonjs module instead of ESM format.

This has resulted in an increase in the project's build size.

I am looking for recommendations on a lightweight chart library that is compatible with Angular 18.

I have attempted to resolve the optimization problem with the Plotly library, but it only led to more errors and complicated the setup.

Answer №1

Plotly provides a variety of bundles, as detailed in the readme

You might want to consider switching to a lighter bundle to decrease the overall size.

Additionally, please ensure that you have set both buildOptimizer and optimization to true in your angular.json file for production builds. It's possible that these settings are currently disabled?

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

Exploring the Depackaging of ES6 Nested Objects

How can I implement ES6 with Destructuring to give users options? I'm having trouble dealing with nested objects and preventing the defaults from being overwritten by partial objects. Check out this simple example on MDN: function drawES6Chart({si ...

Gleaming personalized select input/selectize input

I am striving to customize my Shiny select input in the following ways: Eliminate the label Set a unique background color: #2f2d57 Include a placeholder Enable users to both type-in and select Despite my efforts, I have not been successful in alignin ...

Executing statements within a loop sequentially in jQuery: Best practices

I'm working on developing a program that will display different images in a loop when clicked. To achieve this functionality, I implemented jQuery to trigger a function upon clicking an image, which then cycles through all the images by updating the " ...

The Johnny-Five stepper initiates movement within a for-loop

I am new to using node.js and johnny-five. I want to move a stepper motor 5 times with 1000 steps each. Here is what I have tried: do 1000 Steps in cw ; console.log('ready); do 1000 steps; console.log('ready') ... It woul ...

Validating Linkedin URLs with JavaScript for Input Fields

I've created a basic form with an input field for a LinkedIn URL. Is there a way to validate that this field only accepts valid LinkedIn URLs? Thank you! ...

Unfortunate escapement of characters discovered in variable that returns JSON image source

I am currently utilizing Google Tag Manager to incorporate the 'article' JSON markup and retrieve different variables for modifying specific sections on particular pages. Among the elements I am attempting to obtain is the image source. At prese ...

The ngFor directive seems to be malfunctioning as it is only displaying a single element from the object instead of iterating through all of them in Angular version 12

I'm having trouble looping through my array of objects in the UI. Only one element is being displayed. Can anyone help me figure out what I'm doing wrong? Here is my component.html file: <div class="card" *ngFor="let regionList ...

Issues encountered with Angular project when deploying on NGINX across various directories

I have two angular projects that I want to deploy on my nginx server. The first project is the main website, and the second is the admin portal. I aim to make the main site accessible at www.example.com, and the admin portal at www.example.com/admin. I ha ...

How to retrieve the parent index from within a nested forEach loop in JavaScript

var game_board = [ [1, 2, 3], [4, 5, 6], [7, 8, 9], ]; (function iterate() { game_board.forEach((row, i) => { row.forEach((value, j) => { // accessing indexes i and j console.log(i, j); }); }); })() I have a two-dimens ...

Refreshing a Nextjs page upon clicking a route button for the very first time

Essentially, when the initial page is built and we are on the index page, clicking any button that changes the route - using methods like push or replace in the-router function triggers a page refresh. After the first reload, subsequent clicks on the but ...

Can you guide me on creating a post and get request using ReactJS, Axios, and Mailchimp?

I am brand new to ReactJS and I am currently working on developing an app that requires integration with Mailchimp to allow users to subscribe to a newsletter. I am looking for assistance on making a request using axios. Where should I input my API key? ...

analyzing strings by comparing their characters to another string

In a scenario where I have two strings; let's call them string a="a-b-c" and string b="a-b". I am looking to determine whether every letter in string b is present within string a. ...

Output text in Javascript (not to the console)

I'm on the lookout for a way to welcome a user by their name when they enter it into a JavaScript application. I have tried this code snippet: function getname() { var number = document.getElementById("fname").value; alert("Hello, " + fnam ...

The filter() function seems to be failing to produce any results even though the callbackFn is functioning properly

I've created a function to filter certain JSON elements in an array using Vue 3. Here is the data structure: [ { "UID_Person": "160a5b9e-c352-39e3-802b-9cfcc126da77", "FirstName": "Maxi", ...

Is there a way to determine when the callback function has been called for the final time?

Per the documentation on String.prototype.replace(), if a function is passed to String.replace() with a global regular expression, it will be invoked multiple times. Is there a way to pass a callback within this callback to determine when all invocations ...

Angular 2+ seems to be failing to detect and update changes in variables within the template

I have a component that includes rendering the user's name from the profile object. The corresponding part of the template looks like this: <button mat-button [matMenuTriggerFor]="userMenu" *ngIf="isAuthenticated()"> {{profile?.name} ...

The UIManager could not find the required native component in requireNativeComponent

I understand that this question has been raised multiple times, but previous inquiries have focused on integrating a third-party dependency in a react-native app. In my case, the issue stems from my own native code, and I am struggling to resolve it. My cu ...

The functionality of the igx grid inline feature is not compatible with custom columns

Currently, I am implementing inline editing in the ignite-ui-angular grid. However, I am facing an issue where all rows are highlighted when I select a row, and the save/cancel prompt panel appears in the wrong row. The example provided by ignite-UI work ...

Preparing data before using Kendo UI upload function is essential

I need to pass a data (specifically a GUID) to the upload method of the kendoUpload, so that a particular MVC Controller action method can receive this data each time the upload occurs. $("#propertyAttachmentUpload").kendoUpload({ async: { ...

Having trouble with ReactJS: Why is this.setState not working?

Hello there, I am currently learning ReactJS and struggling with an issue where I keep getting the error message "this.setState is not a function". constructor() { super(); this.state = { visible: false, navLinesShow: true }; ...