A button created in SVG dynamically adjusts its position when the highcharts are resized

Utilizing the highcharts library to display a pie chart. Check out the Stackblitz demo here

In order to incorporate two additional buttons for currency and percent toggle, I have employed the SVG Renderer to position and align these buttons below the center title:

this.curBtn = this._chartPosition.renderer.button('$', 330, 220, (function(){
      console.log(false);
    }).bind(this),normalState,normalState1,pressedState,null,null).add();

    this.prcBtn = this._chartPosition.renderer.button('%', 344, 220, (function(){
      console.log(true);
    }).bind(this),normalState1,normalState1,pressedState,null,null).add();

The pie chart displays correctly on a full-size window but when resizing the browser, the buttons become misaligned. How can I adjust the button positions upon browser resize?

Here are images demonstrating the issue:

  1. Full size:

https://i.sstatic.net/1WLsR.png

  1. Resize smaller screen:

https://i.sstatic.net/EvCBJ.png

javascripthtmlcssangularhighcharts

Answer №1

Experiment with this code snippet to access current coordinates:

Remember to adjust your buttons when the page is resized

this.curBtn = this._chartPosition.renderer.button('$', this._chartPosition.plotHeight/2 - 30,this._chartPosition.plotWidth/2 + 50, (function(){
      console.log(false);
    }).bind(this),normalState,normalState1,pressedState,null,null).add();

    this.prcBtn = this._chartPosition.renderer.button('%', this._chartPosition.plotHeight/2-12,this._chartPosition.plotWidth/2 + 50, (function(){
      console.log(true);
    }).bind(this),normalState1,normalState1,pressedState,null,null).add();

Answer №2

Expanding on the approved solution, I had to implement the following modifications to ensure its functionality:

1. Reversed the positions of plotHeight (representing the y axis) and plotWidth (representing the x axis) in the code snippet below:

this.curBtn = this._chartPosition.renderer.button('$', this._chartPosition.plotWidth/2-15,this._chartPosition.plotHeight/2 + 30, (function(){
      console.log(false);
    }).bind(this),normalState,normalState1,pressedState,null,null).add();

this.prcBtn = this._chartPosition.renderer.button('%', this._chartPosition.plotWidth/2+5,this._chartPosition.plotHeight/2 + 30, (function(){
     console.log(true);
}).bind(this),normalState1,normalState1,pressedState,null,null).add();

  1. During the chart's redraw event, it was necessary to remove and re-add the buttons, as illustrated below:

    events:{

redraw:(function(){
  this.curBtn.destroy();
  this.prcBtn.destroy();
  this.addButtons();
 }).bind(this)
}

Check out the working example on StackBlitz here: here

I hope these adjustments prove beneficial!

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

Retrieve an item from the Ionic Firebase database

My current challenge is retrieving data from the Firebase database. user-service.ts getProfile(){ try {; return this.afDatabse.object(`profile/${this.afAuth.auth.currentUser.uid}`); } catch (e) { console.log(e); } } c ...

javascripthtmlangularfirebaseionic-framework

Steps for building a dynamic layout using bootstrap 4

I've been working on creating a responsive layout similar to the image using Bootstrap 4, but I'm encountering some issues. Specifically, I'm having trouble making the sidebar and bottom bar fixed, as well as adjusting the size of the bottom ...

htmlcsslayoutbootstrap-4

Ways to retrieve the latest message from a particular discord channel

Struggling to retrieve the latest message from one channel by sending a command in another channel. I envision the process to be like this: Channel 1: (I enter) "Get last message of channel 2" Channel 2: Last message is ("Hello"); Channel 1: I receive th ...

javascriptnode.jsdiscord.js

Javascript Egg Timer

I am currently in the process of developing a unique egg timer application that allows users to input values through various form select tags. However, I have encountered a NaN error when trying to set the timer with the JavaScript code provided below. H ...

javascript

Using Javascript to update text within HTML elements without affecting the structure for upcoming event listeners

I've been working on a piece of code that identifies a specific string of characters (_aff.tractionsCode) and swaps it out with another string (tractionsId). The implementation looks something like this: content = document.body.innerHTML.replace(_aff ...

javascript

Ordering columns inside columns with responsive design in Bootstrap 5

Could the layout be rearranged for md+ devices to this configuration on xs, sm devices? <head> <link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="294b46465d5a5d5d5b4859691c07 ...

htmltwitter-bootstrapbootstrap-5

Expandable Grid with UI-GRID - Automatically expand a row when clicked on

I prefer not to utilize the default + icon for expanding the row. The row should expand when clicked anywhere on it. I attempted the following: HTML <div ui-grid="gridOptions" ui-grid-expandable class="grid"> Controller var app = angular.module( ...

javascriptangularjsangular-ui-grid

What is the best way to incorporate a @types module into a TypeScript file that is not already a module?

Setting the Stage: In the process of shifting a hefty ~3,000 line inline <script> from a web-page to a TypeScript file (PageScripts.ts) to be utilized by the page through <script src="PageScripts.js" defer></script>. This script entails ...

javascripttypescript

What is the best way to set a date input as required with AngularJS?

Angular 1.2.23 is the version I am currently using, and I want to set an input field with type=date as required. Here is the code snippet I have: <form name="form" novalidate> <input id="date" name="date" type="date" required /> <sp ...

javascriptangularjs

Facing issues with updating a dynamic input form array in Angular

For my Angular-12 project, I am currently working on implementing a dynamic input fields FormArray within a Reactive Form to handle updates. Below is the code snippet: Interface: export interface IResponse<T> { message: string; error: boolean; ...

angulartypescriptangular-reactive-formsangular12formarray

Unable to transfer information between two components using a service if the recipient component has not been initialized

I am facing an issue with passing data from an admin component to an edit component in my project. I have set up an Edit Service for this purpose, but I'm struggling to retrieve the data when the Edit component is loaded. In the admincomponent.ts fil ...

angularservice

Fade out the notification div when the user clicks anywhere outside of it

I am currently working on a website with a notification feature. When the user clicks on the notification button, a notification box will appear at the bottom of the button. I would like the behavior of this notification to be similar to Facebook's - ...

javascriptjquery

Adding Options on the Fly

I am struggling with integrating option elements into optgroups within my HTML structure using JavaScript, particularly while utilizing the jQuery Mobile framework. Below is the initial HTML setup: <form> <div class="ui-field-contain"> ...

javascriptjquerydom

Implementing dynamic page loading with ajax on your Wordpress website

I'm currently facing an issue with loading pages in WordPress using ajax. I am trying to implement animated page transitions by putting the page content into a div that I will animate into view. However, my current logic only works correctly about 50% ...

javascriptjqueryajaxwordpress

Navigating asynchronous URL parsing in NodeJS

I am still fairly new to the world of Node.js and Javascript, so I appreciate your patience with my confusion around the callback mechanism Bacchanalia. The Issue at Hand I'm currently working on a basic Node.js application that is responsible for h ...

javascriptnode.jsasynchronouscallback

What is the best way to divert a file from one Discord channel and transfer it to a different Discord channel?

I have the following code currently: if (message.channel.id === 'CHANNEL ID 1') { if (message.attachments.size >= 1 ) { client.channels.cache.get('CHANNEL ID 2').send(`${message.author}: TEST SUCCESFULL`); } } Now, I want to ...

javascriptdiscorddiscord.js

Sub menu in navigation bar appearing hidden by images

I designed a CSS menu using the following CSS Code: #cssmenu ul { margin: 0; padding: 0; text-align: center; } #cssmenu li { margin: 0; padding: 0;} #cssmenu a { margin: 0; padding: 0;} #cssmenu ul {list-style: none;} #cssmenu a {text-decoration: none;} # ...

htmlcssslider

Is there a way to interact directly with the threejs components in React without using react-three-fiber?

I am looking to access my 3D model element and control the camera, mesh, animation, etc. from another component in a project where I am using pure threeJs and React. The pure threejs code is added in the componentDidMount part of the React App class, and n ...

javascriptreactjsreact-nativethree.jsreact-three-fiber

Thumbnail with magnifying effect on image

I have a thumbnail that contains both an image and some text. When I hover over the image, it zooms in. Check out this demo here: https://jsfiddle.net/ShiroiOkami/r1awd3b4/ I am looking to achieve an effect where the image zooms in without changing i ...

htmlcss

Guide to making type-safe web service requests using Typescript

When utilizing Angular for web service calls, it's important to note that the type of the returned object is not automatically verified. For example, let's say I have a Typescript class named Course: export class Course { constructor( publ ...

javascriptangularweb-servicestypescript