What steps can I take to ensure that bubbles stay in place in my highcharts graphs?

I recently created a bubble chart using highcharts with the zoomType set to 'xy'. When I tried zooming out of the plot, an interesting visualization appeared. You can view it here.

Answer №1

There has been a bug that is already reported here. This issue emerged in Highcharts 5.0.7, so to avoid it you can use Highcharts version 5.0.6 instead.

For reference, see this example: http://jsfiddle.net/b8arLy77/1/

To work around the bug in version 5.0.7, you can clip the bubble group using the following code:

chart: {
  type: 'bubble',
  plotBorderWidth: 1,
  zoomType: 'xy',
  events: {
    load: function() {
      var chart = this;
      chart.clipBubble = chart.renderer.clipRect({
        x: chart.plotLeft,
        y: chart.plotTop,
        width: chart.plotWidth,
        height: chart.plotHeight
      });
      chart.series[0].data[0].graphic.parentGroup.parentGroup.clip(chart.clipBubble);
    },
    redraw: function() {
      var chart = this;
      chart.clipBubble.attr({
        x: chart.plotLeft,
        y: chart.plotTop,
        width: chart.plotWidth,
        height: chart.plotHeight
      });
    },
  }

See this example for clarification: http://jsfiddle.net/b8arLy77/

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

I am having difficulty accessing specific data in JSON using Searchkit's RefinementListFilter

Utilizing searchkit for a website, I am encountering issues accessing previously converted data in json format. The structure of my json directory is as follows: (...) hits: 0: _index: content _type: content _source: ...

Identifying the mobile browser initiating the request call

I'm in the process of creating a website that needs to be compatible with various devices such as iPhone, Android, Samsung Galaxy S/S2, iPad, Samsung Galaxy Tab, and more. Is there a method to identify the mobile browser requesting the page and apply ...

Unconventional behavior in Vue.js involving the window object

Upon initializing my vue.js 2.0 application, I create a window.User object. Everything seems to be functioning correctly. However, I encounter an issue when trying to use it in some components within my templates: v-if="this.User.role == 2" In some comp ...

Navigating a collection of objects in JavaScript: A step-by-step guide

My data consists of objects in an array with the following structure: [{\"user\":\"mcnewsmcfc\",\"num\":11},{\"user\":\"ManCityFNH\",\"num\":7}]; To clean up the array, I'm using this code: ...

Ensure you save the form before navigating to a different one

Utilizing Asp.net JavaScript and C# for my project. In the content page, there is a data entry form on the right side with links on the left in the master page. If a user leaves the page without submitting the form and clicks the cancel button, they shoul ...

unexpected issue when trying to append a child element after creating its innerHTML

Upon executing this script, I expect to see the initially empty div with id="checkboxes" transformed into: <div id="checkboxes"> <label><input type="checkbox">option1</label> <label><input type="checkbox">opt ...

Tips for presenting the retrieved data from the database in a user-friendly format

$ //First step involves running the PHP code that executes the SQL query to retrieve data from the database, storing it in get_row1, and sending it as a response to Ajax$ <?php $connect = mysql_connect("localhost", "root", ""); $data = mysq ...

numerous conditional statements within a React.js component

Currently revamping my portfolio and encountered an interesting issue. This feature receives tasks (in array format) and sortBy parameter ('all', 'true', or 'false'). The challenge lies in despite passing the value 'all&a ...

Switching camera controls in Three.js from First Person to Orbit mode (and vice versa) can be easily

Transitioning between Three.js FirstPerson controls and Orbit controls can be seamless, but there seems to be an issue when switching from First Person to Orbit where the display gets stuck in a 'mousedown' mode. Is there a way to easily go back ...

The Echart bar graph is not displaying when trying to use JSON data

Seeking assistance as a beginner in building Basic Bar inverted axes using json data. I am trying to achieve a chart similar to Bar Inverted Axes, but encountering issues with the chart not displaying properly. Utilizing Angular to develop the web applicat ...

Is there a way to verify if I am using yarn link properly?

Is there a way for me to determine if my locally linked package is being utilized instead of the remote version? Should it be visible on the development server of my local package? ...

Sharing data between functions in JavaScript allows for more flexible and interdependent code structure

After invoking the Showmenu() JavaScript function from C# and passing a variable to it, there is a need to utilize this variable in another JavaScript function. <script type="text/javascript" > var strmenu; function ShowMenu(strmenu) { alert(str ...

The function n.blur is not a valid method in jQuery

I'm having issues with this code. The console is displaying an error that says n.blur is not a function. var username = '', elem = '', fullName = $('.form input[name="user"]'), emailAddress = $('.form in ...

Steps for Creating an Animation Tool based on the Prototype:

One question that recently came up was: What is the best approach to tackling this issue? Developing a tool that enables designers to customize animations. To make this process easier, it is essential to create an AnimationSequence using JavaScript that ca ...

Sliding to alter the vertex coordinates

Seeking help to dynamically change the x and y position of the first vertex in a triangle using sliders on datgui. Below is my code, can someone help me figure out what I'm doing wrong by assigning variables inside animate()? I've been struggling ...

Error message: The "spawn" function is not defined and is causing a TypeError to be thrown in

Having a bit of trouble here. I'm trying to make an async request using redux-thunk in my action creator, and the code looks like this: export const downloadFromYoutube = (download) => { console.log("Hello"); return dispatch => { va ...

What is the best way to open a new window, such as a music player, and integrate it into a Shopify environment

Currently, within my Shopify store, I am using the following code: <script language="javascript" type="text/javascript"> function popupwindow(url, winName, w, h) { var left = (screen.width/2)-(w/2); var top = (screen.height/2)-(h/2); return wi ...

Challenges faced when trying to integrate Angular2 Material SnackBar

Currently, I am attempting to incorporate the Material Snackbar into my angular2 application. Previously, I had successfully integrated the ProgressBar from the same library without any issues. However, when trying to integrate the SnackBar, I encountered ...

Determine if an option is chosen in multiple select elements using Vanilla JavaScript

In order to determine if a checkbox is checked, we use the following code: let isChecked = event.target.checked But what about multiple select options like the example below? <select name="books[]" multiple> <option value="A">A</option& ...

Tips for incorporating the camera from fbxloader into your three.js scene

I am currently utilizing fbxloader from three.js to incorporate a model into my scene. I have noticed that the most recent version of fbxloader.js (https://github.com/mrdoob/three.js/blob/master/examples/js/loaders/FBXLoader.js) has the capability to read ...