Customizing valueAxis dynamically in Amcharts

I am currently utilizing Amcharts to display my data.

Within my chart, I have 4 graphs with valueAxes ranging from 0 to 100.

Is there a method for me to dynamically change the valueAxes to a range of 0-250 after the chart has been loaded in the view?

I attempted to follow this guide, but unfortunately, it did not work as expected.

Although I have tried using the code snippet below to change the axis values and graph, it hasn't produced the desired outcome:

<input class="form-control maxField" type="number" placeholder="Max value">

      $(".maxField").on("keyup", function() {
        var valueAxis = new AmCharts.ValueAxis();
        valueAxis.maximum = this.value;
        chart.addValueAxis(valueAxis);
        chart.validateNow();
      });
javascriptamcharts

Answer №1

Opting to modify the current value axis is a more efficient approach compared to generating a new one, especially when the goal is to alter the maximum property dynamically.

Give this a shot:

$( ".maxField" ).on( "input", function() {
  chart.valueAxes[0].maximum = this.value;
  chart.validateNow();
} );

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

Misunderstandings between HTML and CSS

Can someone please clarify how the functionality of the active-slide class? Code: <div class="slider"> <div class="slide active-slide">..</div> <div class = "slide slide-feature">..</div> <div class = "slide">..</di ...

javascriptjqueryhtmlcss

There are no leaks displayed in Chrome Dev Tools, however, the Task Manager will show them until Chrome eventually crashes

Do you have a CPU-intensive application that you're working on? Check it out here: https://codepen.io/team/amcharts/pen/47c41af971fe467b8b41f29be7ed1880 It involves a Canvas on which various elements are constantly being drawn. Here's the HTML ...

javascriptmemory-leaks

Pass the identification of a particular card to the following route in order to retrieve data using that specific id in nextjs

[]Hello! I am currently working on fetching data from an API and using the map function to display the retrieved data. My goal is to extract more details about a specific piece of data by taking its ID and passing it to another page. The issue arises in my ...

javascriptreactjsnext.jsroutes

Creating Test Cases for Service Response Validation

I am currently attempting to unit test an API within my ngOnInit method. The method is responsible for making a call to the service in order to fetch details. If the details are not undefined, an array called 'shoeDataResponse' of type *shoeData ...

javascriptangulartypescriptunit-testingfrontend

Error in Typescript: Attempting to access the property 'set' of an undefined value

Currently, I am in the process of setting up a basic example of push notifications on Android using Nativescript and Typescript. Although my code may seem a bit messy, I am struggling with properly rewriting "var Observable = require("data/observable");" a ...

javascripttypescriptfirebasepush-notificationnativescript

Attempting to transfer information from a JSON file to a Netflix-inspired platform

Images I am currently working on integrating data from my json file export const products = [ { name: 'iPhone 11', image: '/assets/images (7).jpeg', time: '1 hour 14mins', age: '+16&apo ...

javascriptreactjsnetflix

From AJAX response to React state attribute, store the JSON data

I have a component where I need to fetch freight values via ajax and store them in the state property of this class. import React, { Component } from 'react'; import Freight from './Freight'; import CreateFreightEntryModal from '. ...

javascriptjsonajaxreactjs

Identifying line breaks caused by browsers or CSS forced line breaks

<p style="width:60px"> This is just a sample text. It is a piece of text that doesn't really say anything meaningful.</p> When this text is rendered as HTML, it would look like this: This is just a sample text. It is a piece of text ...

javascripthtmlcsspdf-generation

Is there a way for me to intercept JavaScript code before it runs on Chrome?

Looking to develop a Chrome extension for the developer tools that can intercept JavaScript code on a current web page prior to compilation or execution by the browser. I aim to instrument the JS code before it runs in the browser. Could someone assist wi ...

javascriptgoogle-chrome-extensiongoogle-chrome-devtools

Is it possible to verify if a function is invoked using Jest, Typescript, and ts-jest in action?

Currently, I'm testing the functionality of this code snippet: src/helpers/CommentHelper.ts: export default class CommentHelper { gitApiObject: GitApi.IGitApi ; constructor(gitApiObject: GitApi.IGitApi) { this.gitApiObject = gi ...

javascriptnode.jstypescriptjestjsts-jest

Generating a JavaScript bundle using the npm TypeScript compiler

Is there a way to compile TypeScript source files into one JavaScript bundle file? We have developed a tool on node.js and are currently using the following TypeScript compilation code: var ts = require('typescript'); ... var program = ts.creat ...

javascriptnode.jstypescriptbundle

Steps for creating checkboxes for individual table rows in HTML using embedded PHP and updating their values in a PostgreSQL database:1. Begin by iterating through each

I have already retrieved the data from the database. It is displayed on the HTML table, but it is currently in non-editable mode. I need to ensure that the data shown is accurate and update its Boolean value in the database. Otherwise, incorrect records sh ...

javascriptphphtmlcodeignitermodel-view-controller

Element not chosen in Angular version 6

Recently delving into Angular 6, I've been working on setting up form validation within an Angular form. Validation has been successfully implemented, but there's a minor issue with the select box displaying an empty first value. Here is my code ...

javascriptangular

The settings of the button return to their default state once it is clicked on

I've been working on a small project and I added a button with hover and CSS effects. However, the issue is that once the button is clicked, it reverts back to its basic state without any of the CSS properties applied. I attempted to troubleshoot if ...

javascripthtmlcss

Unable to input characters consecutively into the text field because it is being displayed as a distinct function within the component

When attempting to bind a text field using the approach below, I encounter an issue where entering characters in the text field causes the control/focus to shift out of the field after the first character is entered. I then have to click back into the text ...

javascriptreactjsmaterial-uitextfieldonchange

Why can't we use percentages to change the max-height property in JavaScript?

I am currently working on creating a responsive menu featuring a hamburger icon. My goal is to have the menu list slide in and out without using jQuery, but instead relying purely on JavaScript. HTML : <div id="animation"> </div> <button ...

javascripthtmlcss

When an input in Vue.js registers a @keyup event, it will return to the parent

I am encountering an issue with my input component where pressing enter redirects me to the parent component. Even adding a @keyup event does not solve the problem. Could this be happening because I am in a child component? How can I prevent the enter key ...

javascriptvue.js

Prevent Click Event on Angular Mat-Button

One of the challenges I'm facing involves a column with buttons within a mat-table. These buttons need to be enabled or disabled based on a value, which is working as intended. However, a new issue arises when a user clicks on a disabled button, resul ...

javascripthtmlangulartypescriptangular-material

Display a hidden div upon loading the page if a certain condition is met

As a beginner in this field, I am struggling to assist a friend with a project. He needs a simple quote form that can generate HTML quotes for his client on a private WordPress page. The form should display a specific div based on the radio button selecti ...

javascriptphpjqueryhtmlcss

The best practices for integrating Firebase with REST APIs

While searching for a tutorial on integrating REST APIs with Firebase, I came across numerous code snippets utilizing the curl method calls or other helper libraries. However, what I couldn't find were the basics - such as where to call these methods ...

javascriptpythonapifirebasefirebase-realtime-database