Angular nvd3 Stack Area Chart with Expand Option showcasing the full 0% to 100% range

I'm currently facing a challenge with the stacked area chart. The problem arises when I use the "expand" feature. This option has a y-axis range of 0% to 100%, but the values seem to be multiplied by 100%.

Let's consider this dataset...

x [1,2,3,4,5,6,7]

y [0, 140, 451, 867, 903, 960, 1000]

140 + 451 + 867 + 903 + 960 + 1000 = 4321

960 / 4321 * 100% = 22.21%

So, in the case of the expand option, the value of 960 becomes 960% when it should actually represent 22.21%.

  1. Is there a way to adjust the data format so that the y value aligns with the 0%-100% range in the "expand" mode?

  2. Alternatively, is there a method to detect when a user clicks on the "expand" option?

javascriptcssangularjsnvd3.js

Answer №1

When your area graph functions properly as a stream or stacked graph, it should expand automatically without any issues. However, if you have set a yDomain or forceY attribute, you may encounter difficulties with the expanded view.

Answer №2

To make changes, navigate to line 12863 in the nv.d3 file and update the following code snippet...

    stacked.dispatch.on('elementMouseover.tooltip', function(evt) {

    evt.point['x'] = stacked.x()(evt.point);
    if(stacked.style() == 'expand'){
            evt.point['y'] = evt.point.display.y;
    }else{  evt.point['y'] = stacked.y()(evt.point);}

    tooltip.data(evt).position(evt.pos).hidden(false);
});

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

The updates made to a variable within an ajax request are not immediately reflected after the request has been completed

My global variable is not displaying the expected result: function checkLiveRdv(salle, jour, dateus, heure) { var resu; var urlaction = myUrl; $.ajax({ type: "POST", dataType: "json", url: urlaction, data: myDatas, suc ...

javascriptajaxvariablesjquery

Z-index behaving abnormally

I've been working on developing a website and one of the key features I'm trying to implement is a slideout menu that slides horizontally when the mouse hovers over it. To make development easier, I initially set the menu to be fully extended by ...

htmlcss

Tips for rendering only the descending portion of a spline in three.js

In three.js, I have the ability to draw a spline using three coordinates - start, mid, and end. When creating this spline, the curve starts at the 'start' coordinates, rises to the 'mid' position, and then falls to the 'end' c ...

javascriptthree.jsspline

Issues with Firebase-admin preventing writing to the database are occurring without any error messages being displayed

Issues with Firebase admin writing to the database. The database is instantiated as follows: var db = admin.database(); A reference to the desired table is then set up: var systemsRef = db.ref("systems/"); A function is created to check if a 'sys ...

javascriptnode.jsfirebasefirebase-realtime-databasefirebase-admin

Guide on resizing a background image to fit a div

Looking to enhance the appearance of my website by incorporating a cover image. Positioned at the top of the page is a div tag with dimensions set to 80% width and auto height. I aim to insert an image as the background of this div, stretching in width b ...

csshtml

Turn off spellcheck for all material-ui elements

Is there a way to deactivate spellcheck globally for elements in the material-ui library? Before incorporating the material-ui library into my project, I used the code below to turn off spellcheck for all new DOM elements: const disableSpellCheck = funct ...

javascriptreactjsmaterial-ui

Guide to setting up and utilizing Node Express sessions

I have been experimenting with Express sessions but am facing an issue with session variables not persisting between routes. I have created a simplified example of my code. What additional steps do I need to take to ensure that req.session.user remains tru ...

javascriptnode.jsexpress

Which is faster in JavaScript: using the IndexOf method or looping through an array?

I'm facing a situation where I have an array of JSON objects and need to identify the object with a specific property. While this may seem like a redundant question, please bear with me because my approach might differ from previous inquiries. A coll ...

javascriptarraysperformancemongodbindexof

Incorporating a Vue application into a server-side framework application, encountering issues with Vue Public Path

Summary - Incorporating a Vue app into a Phoenix app. Constructing the Vue app with vue cli and ensuring the files are placed correctly within the Phoenix project directories. After building, there is an issue where the asset file paths do not align with t ...

javascriptvue.jsvue-cli

Troubleshoot: How to Fix the socket.io net::ERR_CONNECTION_TIMED_OUT

I am facing an issue with my website's real-time chat functionality. It works perfectly on localhost without any errors. However, when I try to run it on the server, I encounter the following error: http://my.domain:52398/socket.io/?EIO=3&transpo ...

javascriptnode.jssocketschatlivechat

The image is layering on top of the navigation submenus

Struggling to fix an overlapping issue on a Wordpress site at the moment. The problem lies within the sub menu under the "Portfolio" section on this website. The image is covering up the submenu, hiding it in the background when I want it to display in fro ...

csswordpressz-index

I am facing an issue with file manipulation within a loop

I need to set up a folder with different files each time the script runs. The script should not run if the folder already exists. When I run the script, an asynchronous function is called and one part of this function causes an issue... This is my code : ...

javascriptnode.jsjsondiscord.js

Cannot locate the Django bootstrap files

Although I have set up Django with bootstrap by following tutorials, I am facing an issue where Django is unable to locate the static files even when I am replicating the steps shown in the tutorials. The structure of my Project is as follows: webshop ...

pythoncssdjangotwitter-bootstrap

Having EventListeners set up across a single CSS class returns null when applied to different types of elements simultaneously

I want to create floating labels that resize dynamically when an input is clicked, similar to modern forms. I am using vanilla JS exclusively for this task. Currently, the setup works with the <input> tag. However, it does not work with the <text ...

javascripthtmlcssforms

Generating numerous circular elements for each item in the dataset using D3

My dataset consists of various years and corresponding numerical values for each year as shown below: "data":[ ["1951","306","27","159","34","82","4"], ["1956","426","41","203","47","119","16"], ["1959","562","67"," ...

javascriptd3.js

Encountered an eas error during Android build process

When I try to execute the command "eas build --platform android" I encounter the following error message: "✖ Build failed ...

javascriptandroidtypescriptreact-nativeexpo

Storing Information in a Two-Dimensional Array using JavaScript

Looking to loop through the Data array and indicate with an "O" if it contains the specified Month and Number. For example, for "Jan-1", Array1[0][0] should be set to "O". However, the code provided below is not working as expected. Any assistance would ...

javascriptarraysloopsmultidimensional-arraytabular

What is the best way to initiate a Post/Get Request to NodeJS without causing a page refresh?

Struggling to run a NodeJS function after clicking a button? You're not alone. Ajax requests haven't been working for me either when it comes to running NodeJS functions. I've got a bash script that generates a JSON file which I want to par ...

javascriptnode.jsajaxexpress

I seem to be having issues with the downloaded files for Bootstrap 4. Is there something I am

After creating a site with Bootstrap 4 and downloading all the necessary files, I encountered an issue where Bootstrap was not functioning properly. Strangely, when using the CDN version of Bootstrap, everything worked perfectly. Could I be overlooking som ...

javascriptcssbootstrap-4file-structure

AngularJS: Reset all numeric text boxes to blank when clicked/tapped in Kendo

I am facing a challenge in AngularJS where I have an uncertain number of NumericTextBoxes that are generated using ng-repeat: <input kendo-numeric-text-box k-format="'c2'" class="form-control" k-min="0" k-max="10000000" k-ng-model ...

jqueryangularjskendo-uikendonumerictextbox