What is the process for "unleashing" the X Axis following the execution of chart.zoom()?

After setting the scroll strategy to 

setScrollStrategy(AxisScrollStrategies.progressive)
, I noticed that my chart was scrolling too quickly due to the fast incoming data. To address this, I decided to set a specific initial zoom level for the chart using 
chart.zoom({ x: -200, y: 180 }, { x: 500, y: 500 })
. However, this adjustment caused the chart to no longer auto-scroll along the X-axis. Is there a function I can use to release the axis without having to double click on it?

I'm also confused about the data cleaning process. Initially, I thought that 

series.setDataCleaning({ minDataPointCount: 1000 })
would clean up any data points exceeding 1000 and out of view. Yet, when I checked the total number of points with 
console.log(series.getPointAmount())
, I observed the count going beyond 1000 and not being cleaned up even after some time. My timeseries chart should ideally display around 120k data points in total. How can I ensure that there are always at least 120k points on the chart while removing unnecessary old ones from rendering?

javascriptlightningchart

Answer №1

When using the setScrollStrategy(AxisScrollStrategies.progressive) method, the axis will maintain a constant distance between the start and end points, scrolling to reveal series boundaries beyond the active axis interval.

To control the loading speed, you can manually set the interval using the setInterval property of the Axis.

Axis.setInterval(0, 100)

You have the option to include additional parameters in the setInterval method such as:

- disableScrolling: Disables automatic scrolling if set to true

- animate: Either a boolean value for animation enabled or a number indicating animation duration in milliseconds

setInterval(start: number, end: number, animate: number | boolean | undefined, disableScrolling: boolean | undefined): this

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 module 'pouchdb' appears to be missing, functioning correctly on Mac but encountering issues on Windows

I have taken over a project built with Ionic that was originally developed on a Mac by my colleague. I am now trying to run the project on my clean Windows 10 PC with Ionic, Cordova, and Python installed. However, I am encountering an error that my colleag ...

javascriptangularionic-frameworkionic3

Jquery(Ajax) call encountered a problem when attempting to send the object

Struggling to send data to a MongoLab DB using JS and JQueryAjax call. The issue lies in being able to see the OID in the DB but no data is actually populated. Upon checking the code and network settings, it's evident that the payload always remains e ...

javascriptjqueryajaxmongodbmlab

A Guide to Sorting Nested Lists with SortableJS and jQuery

I have been experimenting with SortableJS and jQuery SortableJS Binding in order to create a nested list, capture the new order of the list and its children (resembling a hierarchical structure) using console.log(). I attempted the solution provided in th ...

javascriptphpajaxlaravelsortablejs

Dynamic Field Validation in Angular 6: Ensuring Data Integrity for Dynamic Input Fields

After successfully implementing validation for one field in my reactive form, I encountered an issue with validating dynamically added input fields. My goal is to make both input fields required for every row. The challenge seems to be accessing the forma ...

javascriptangularangular6angular-reactive-forms

Repetitive use of multiple submit buttons in AngularJS

i'm currently working with AngularJS Currently facing this issue: view screenshot I have utilized the following HTML code to display submit button for two different types of forms. One for TEXT Form and one for ENUM Form: <div ng-controller="g ...

javascriptjqueryhtmlangularjsforms

Restrict the number of labels on Chart.js exclusively for smaller displays

How to Limit the Number of Labels on a Chart.js Line Chart I am looking for a way to decrease the number of labels on my line chart only when it is viewed on a small device. The solution provided in the previous post suggests using the following code: xAx ...

javascriptvue.jsresponsive-designchart.js

What is causing my HTML to not recognize my Angular JS code?

Trying to dive into Angular JS, I wrote a small piece of code but for some reason, the HTML is not recognizing Angular JS. This is my index.html file: <!DOCTYPE HTML> <html ng-app="store"> <head> <link rel="stylesheet" type=" ...

javascripthtmlangularjs

Exploring the Node.js Connector: Utilizing Collection.remove

I can't wrap my head around the meaning of this: w, {Number/String, > -1 || ‘majority’ || tag name} the write concern for the operation where < 1 is no acknowlegement of write and w >= 1, w = ‘majority’ or tag acknowledges the ...

javascriptnode.jsmongodb

How can VueJS cycle through the arrays within an object?

Is there a way to efficiently iterate through arrays within an object like in this example? I have a simple code snippet that currently outputs indexes in order, but I'm looking to access the values of the array instead. <template> <div&g ...

javascriptarraysvue.jsfor-loopobject

Accessing/Storing Pictures in MongoDB using Mongoose

I've been struggling with managing images in MongoDB for a while now. Everywhere I look suggests using GridFS because of the 16mb size limit per document. However, the documents I want to store are all <16mb each. Currently, I am storing it like th ...

javascriptnode.jsmongodb

Error: Unable to locate the tslint command

After attempting to utilize tslint --fix, I encountered the error message bash: tslint: command not found.... To install tslint, I ran the following command: yarn global add tslint typescript. The operating system on my machine is Centos 7. ...

javascripttypescripttslint

Increase the number of table rows as you scroll downwards

Hello everyone! I've been searching online for information on how to implement infinite scrolling in a table, but all I found were tutorials using divs. Can someone please provide guidance on how to achieve this? Perhaps a sample code snippet or tuto ...

javascriptphpajax

Prevent image upload until text is clicked on

When the user clicks on the mask image, a file upload dialog box is displayed. Once the user uploads an image, the text "Remove Image" is shown. Issue: Currently, users can upload another image before clicking on "Remove image". However, after clicking o ...

javascriptjquery

Selenium with JavaScript: The Battle of Anonymous Functions and Named Functions

When working with Selenium JavaScript, the prevalent advice I come across online suggests that the most effective approach to handle the asynchronous behavior of JavaScript is by utilizing anonymous functions with .then() for locating/interacting with elem ...

javascriptselenium

Using three.js to add an image onto an already existing object

I attempted to modify the appearance of an object by adding an image, but all my tests resulted in a white object... The goal is simply to apply an image to the entire object. Here is my test code: var obj = scene.getObjectByName('wall_20_118') ...

javascript3dthree.js

Is it possible to reveal a concealed element or modify the functionality of a hyperlink?

I have a link in the navigation that includes an animated icon of a + turning into an x. When the icon is in the x state, I want users to be able to close it by clicking on the icon or text. However, I am unsure of the best way to approach this. One op ...

javascriptangularjsangular-ui-router

Utilizing Node Js for Form Data Transmission and Retrieval

I've successfully created two separate JS files, each responsible for sending and retrieving form data to and from the database. My dilemma is whether it's more practical or feasible to leave these two JS files as they are and serve their individ ...

javascriptmysqlnode.jsexpress

Error encountered in NextJS: Trying to call res.unstable_revalidate which is not a function

I recently tried out a cutting-edge feature introduced in NextJS v.12.1 . The API itself is functioning correctly and can be accessed. However, I encountered a 500 error with the message res.unstable_revalidate is not a function. This issue persisted wheth ...

javascriptnode.jsreactjsservernext.js

Emptying the trumbowyg editor within an Angular environment

I am currently experiencing issues with the trumbowyg editor in a project I'm working on. I am able to update the editor by changing its model but cannot seem to clear its content using $scope.editorModel = '';. For a more detailed explanati ...

javascriptangularjswysiwygtrumbowyg

What is the best method for storing dynamic values and attribute labels in a state within a React.js application?

I am currently working with react js. On my single product page, I have an array of objects called attributes that I need to display in the user interface. Here is a preview of how it looks: https://i.sstatic.net/GttrD.png My goal is to retrieve and stor ...

javascriptarraysreactjsobjectreact-typescript