Draggable bar charts in Highcharts allow users to interact with the data by clicking

I'm working on creating a chart that allows for setting values by clicking and dragging. While the dragging functionality is working fine, I've run into an issue with the click event. When I click to set a new value, the draggable feature acts erratically because it removes the point before it can be dragged.

Here is the code I'm using for the click event:

events: {
          click: function (e) {
            // find the clicked values and the series
            let x = Math.round(e.xAxis[0].value),
              y = Math.round(e.yAxis[0].value),
              series = this.series[0];

            console.log("values",x,y,series);

            // Add the new point
            if(e.yAxis[0].value <= 16){
              series.data[x].remove();
              series.addPoint([x, y]);

            }
          }
        }

The draggable functionality is being utilized through a plugin.

angulartypescripthighchartsangular5

Answer №1

Here is the solution I came up with:

events: {
          click: function (e) {
            // Identify the clicked values and the series
            let x = Math.round(e.xAxis[0].value),
              y = Math.round(e.yAxis[0].value),
              series = this.series[0];

            console.log("values",x,y,series);

            // Update if condition is met
            if(e.yAxis[0].value <= 16){
              series.data[x].update(y);

            }
          }
        }

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

Extracting Date and Time Information from matDatepicker in Angular 6 Material

Below is the code snippet present in my html file: <mat-form-field> <input matInput [matDatepicker]="myDatepicker" placeholder="Choose a date" [(ngModel)]="model.value" name="value"> <mat-datepicker-toggle matSuffix [for]="myDatepic ...

angular

Encountering an issue with managing promises in Observables for Angular HTTP Interceptor

Currently, I am encountering the following situation: I have developed an authentication service using Angular/Fire with Firebase authentication. The authentication service is expected to return the ID token through the idToken observable from Angular/Fir ...

angulartypescriptfirebase-authenticationrxjs

Using dual ngFor in Angular 4: A step-by-step guide

I am encountering an issue in my Angular 4 project where I receive two different arrays in response to a server request, and I want to utilize both of them in the template. Here is my controller code: this.contractService.getOwnerContract() .subscribe( ...

htmlangular

I am seeking advice on how to create an extension for a generic class in TypeScript specifically as a getter

Recently, I discovered how to create extensions in TypeScript: interface Array<T> { lastIndex(): number } Array.prototype.lastIndex = function (): number { return this.length - 1 } Now, I want to figure out how to make a getter from it. For exam ...

typescript

The global class variable encounters an error when trying to assign the value of "socket" to it

Within my class constructor, I am setting up a Socket connection and then storing the socket parameter in a global class variable (this.socket_variable = socket) so that I can access it across all functions in the class. CODE const { Server } = require(&q ...

javascriptnode.jsangularwebsocket

Guide on Highcharts Bar Chart: Adjusting the Minimum Bar Width/Length

We are currently experiencing some challenges within our application where bars are not displaying if a particular value is significantly smaller compared to the largest value. To better illustrate this issue, you can refer to the following jsFiddle: http ...

jqueryhighcharts

Include a thousand separator and round to two decimal places in the ngModel input

I have been attempting to format my input values by adding thousand separators and 2 decimals as shown below TS onBlur(event){ if (event.target.value !== ''){ event.target.value = (parseFloat(event.target.value).toFixed(2)).toLocaleS ...

angular

Utilizing a segment of one interface within another interface is the most effective method

In my current project using nextjs and typescript, I have defined two interfaces as shown below: export interface IAccordion { accordionItems: { id: string | number; title: string | React.ReactElement; content: string | React. ...

javascriptreactjstypescriptnext.jsinterface

What is the best way to ensure type safety in a Promise using Typescript?

It seems that Promises in Typescript can be type-unsafe. This simple example demonstrates that the resolve function accepts undefined, while Promise.then infers the argument to be non-undefined: function f() { return new Promise<number>((resolve) ...

javascripttypescriptes6-promise

"Exploring the insertion of a line break within the modal body of an Angular application

Is it possible to create a modal for error messages with multilined body messages without altering the modal template? Any assistance would be greatly appreciated. <div class="modal-body" > <p *ngIf="!_isTranslatable">{{_modalBody}}</p&g ...

htmlangular

Is there a way to automatically close a p-dropdown when a p-dialog is closed?

One issue I have encountered with my angular component, which includes ngprime p-dialog, is that the p-dropdown within the dialog does not close properly when the user accidentally clicks on closing the dialog. This results in the dropdown options remainin ...

angularprimengprimeng-dropdowns

Guide to making a personalized decorator in loopback4

async verifyUserMembership(userId: string, productId: string) { if (userId && productId) { const userExists = await Product.find({ where: { userId: userId, id: productId } }); return !!userExists; } return false; } I am ...

typescriptloopbackjsstronglooploopback4

Is there a way to implement an extra placeholder attribute with Angular4?

Currently, in a project where I am utilizing Angular Material, there is a form integrated with an autocomplete component. The functionality works as expected but I am interested in implementing placeholder text once the user focuses on the input element. ...

angularangular-material2

Creating generic output types in TypeScript based on the input types

In my React-Native project, I'm focusing on implementing autocomplete and type validation. One of the challenges I'm facing is configuring the types for the stylesheet library I am using. A customized stylesheet is structured like this: const s ...

typescripttypescript-generics

Guide on creating a similar encryption function in Node JS that is equivalent to the one written in Java

In Java, there is a function used for encryption. public static String encryptionFunction(String fieldValue, String pemFileLocation) { try { // Read key from file String strKeyPEM = ""; BufferedReader br = new Buffer ...

javascriptjavanode.jstypescriptrsa

Delete row from dx-pivot-grid

In my current project, I am utilizing Angular and Typescript along with the DevExtreme library. I have encountered a challenge while trying to remove specific rows from the PivotGrid in DevExtreme. According to the documentation and forum discussions I fo ...

angulartypescriptdevextremedevextreme-angular

How can one point to a parameter within the documentation of a TypeScript function?

I am attempting to incorporate parameter references in function descriptions like this: /** * Deletes the Travel Cost with the given {@param id} * @param id the id of the travel cost to be deleted */ deleteTravelCost(id: number): Observable<{}> { ...

typescriptjsdoc

Hidden input fields do not get populated by Angular submit prior to submission

I am in the process of implementing a login feature in Angular that supports multiple providers. However, I have encountered an issue with submitting the form as the loginProvider value is not being sent to the server. Below is the structure of my form: &l ...

javascripthtmlangulartypescript

When conditional types are used to pass unions through generics, the assigned value defaults to 'any' instead of

In search of a universal type to implement in my actions. Actions can vary from simple functions to functions that return another function, demonstrated below: () => void () => (input: I) => void An Action type with a conditional generic Input h ...

typescript

Error: Attempting to access the value property of a null object within a React Form is not possible

I am currently developing a form that includes an HTML input field allowing only numbers or letters to be entered. The abbreviated version of my state interface is outlined below: interface State { location: string; startDate: Date; } To initiali ...

javascriptreactjstypescript