The act of exporting a chart results in a RangeError being thrown: Maximum Call Stack Size Exceeded within the highcharts-more

I am encountering an issue with one of my packedbubble charts throwing a RangeError in the title when attempting to export the graph, while the others work fine. The chart builder remains the same for all graphs; only the data and title text are appended to the chart during export.

You can view a live demo here. Key code snippet provided below:

This code includes functions for creating assetCirclePack charts, clearing selected highlights, handling chart point clicks, and exporting charts to different file formats. The main function assetCirclePack initializes the Highcharts chart with specific configurations. There are additional functions such as clearSelectedHighlight to reset selections, chartPointClick to handle point clicks, and chartExportSwitch/chartExportLoc for exporting charts in various formats.

The assetCirclePack function takes parameters like targetDiv ID, dataset array, labelfilter value, useSimulationBool flag, exportURL for file export, and NoDataString message to display if there is no data available. It creates a packedbubble chart based on the dataset provided.

The clearSelectedHighlight function loops through active charts to reset highlighted points. On the other hand, the chartPointClick function manages interactivity when a chart point is clicked.

The chartExportSwitch function allows users to select the output format (JPEG, PNG, SVG, PDF) for the exported chart. It uses the chartExportLoc function to generate the export based on the specified type and chart configuration details.

These functions ensure smooth interaction and flexibility in exporting interactive packedbubble charts created using Highcharts.
javascripthighcharts

Answer №1

It seems like the issue you're currently facing is connected to the dimensions of the plot area in your chart when dealing with lengthy text in both the Title and Subtitle. The excessive text is taking up space that should be allocated for rendering bubbles, resulting in an error.

I suggest adjusting the height of your chart to provide ample room for the bubbles to render without any issues.

chart: {
    shadow: false,
    width: 800,
    height: 1000
}

Check out this live example for reference: https://jsfiddle.net/y7w1sbak/

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

React Js month picker problem encountered

I am currently working on implementing a month picker using the library called react-month-picker The code is functioning correctly in React: https://codesandbox.io/s/react-month-picker-forked-84rqr However, when I tried to integrate the same code into a ...

javascriptreactjsdatenpmnext.js

Mongoose JS is unable to display the query value in the output

Is there a way to use mongoose js to create a collection of kittens with specific attributes like {name: "mike"}? Once this document is created, I need to be able to view its value. I've attempted to write the following code: However, I've enco ...

javascriptnode.jsmongodbmongoose

Using React JS to extract query string values

My current URL contains the following: http://example.com/callback?code=abcd I am trying to extract the value of "code." Here is the React code I have written: import React from 'react'; import { useEffect } from 'react'; const Callba ...

javascriptreactjsreact-hooksquery-string

Comparison Between Angular and Web API in Regards to Racing Condition with Databases

Currently, I am working on an Angular service that iterates through a list and makes web API calls to add or modify records in the database. The service operates on a small record set with a maximum of 10 records to update. After the loop completes, Angula ...

javascriptangularjs

The Javascript regex allows for the presence of positive and negative numbers, with the option of a single minus symbol

oninput="this.value = this.value.replace(/[^-0-9.]/g, '') This code snippet is utilized in my current project. However, there seems to be an issue where the input can contain more than one minus sign, as shown here: ---23 To address this p ...

javascriptregex

calling object functions using additional parentheses

After reviewing the passport.js documentation, I came across this piece of code: app.get('/login', function(req, res, next) { passport.authenticate('local', function(err, user, info) { if (err) { return next(err); } if (!u ...

javascriptexpresspassport.js

Guide to presenting XML information from a web address using XSLT

I am currently working with dynamic XML sports data from a URL in a Yahoo API, and I want to display and sort a selection of this data on my website using XSLT. This is my first time dealing with XML and XSLT, and while testing, I have managed to correctly ...

javascriptphpxmlxsltyahoo-api

Press the submit button after receiving the ajax response

Is there a way to manually or programmatically submit a specific page? The catch is that before the submission can happen, a function called create_impi_num(x) needs to be triggered in order to store data using $.post(). The issue at hand: If I set the s ...

javascriptjqueryajax

Struggling to incorporate real-time data into a jQuery pie chart

Having trouble setting dynamic data into my pie chart. The hard-coded code is functioning correctly, but there seems to be an issue with the dynamic data. $(contact_listddd).each(function(index, data) { total_kra=data.graph_count; ...

javascriptjqueryhighcharts

Tips for optimizing large image files on a basic HTML, CSS, and JavaScript website to improve site speed and ensure optimal loading times

Currently, my site is live on Digital Ocean at this link: and you can find the GitHub code here: https://github.com/Omkarc284/SNsite1. While it functions well in development, issues arise when it's in production. My website contains heavy images, in ...

javascripthtmlcssuser-interfacegsap

Tips for evaluating the build size of a Create React App and ways to minimize it

Currently, I've been following the steps outlined in this helpful guide: https://create-react-app.dev/docs/analyzing-the-bundle-size/ and I'm gearing up to execute the analyze command to assess my app's size. Is this approach the most effect ...

javascriptreactjsbundle

How is the height or width of the Bootstrap modal determined?

I'm having trouble utilizing Jschr's modified Bootstrap-Modal for different modal sizes. I can't seem to understand why some modals appear taller, wider, or have other specific dimensions. For more information, refer to the documentation: ...

javascriptcssajaxhtmltwitter-bootstrap

The JavaScript program is occasionally receiving unconventional input

I'm really struggling with this one. As part of a programming exercise, I am developing a JavaScript calculator. You can access the functioning calculator here on Codepen. At the bottom left corner of the calculator interface, you will notice a "+-" ...

javascript

The identity of depName remains elusive

I am encountering an issue where depName is undefined. I am attempting to iterate through the array but can't seem to figure out what's causing the problem. My goal is to determine the most profitable department from the sales data provided. var ...

javascript

The issues of cross-origin domains arise when utilizing iframes with src links originating from the server side

Encountering a cross-origin domain issue, receiving the following error while working with an iframe: candidateInterviewCtrl.js:39 Uncaught SecurityError: Blocked a frame with origin "http://localhost:9000" from accessing a frame with origin "http://local ...

javascriptangularjsiframe

Retrieve all the keys from an array of objects that contain values in the form of arrays

Looking for an efficient way to extract all keys from an array of objects whose values are arrays, without any duplicates. I want to achieve this using pure JavaScript, without relying on libraries like lodash or underscore. Any suggestions on how to impro ...

javascriptarraysjsonobject

Transforming the navigation menu using CSS, HTML, and jQuery

One challenge I am facing involves creating a menu similar to the one on http://edition.cnn.com/. I want the clicked button in the menu to receive focus, while the others lose it. Despite trying various methods, I have not been successful. Can someone off ...

javascriptjqueryhtmlcss

Can anyone explain why the cookie isn't being sent to the server?

Hey there, I'm currently developing a Nodejs REST API that includes sign-up and log-in features. When a user logs in, they receive an accessToken. Additionally, a cookie is stored containing the refreshToken to allow the user to make requests to the ...

javascriptnode.jsrestauthenticationjwt

Create a translucent object with three.js

Currently, I am experimenting with three.js and have been following various tutorials to create a script that loads an object from an obj file. The script also adds a texture to the object and provides interactive features such as camera control and collis ...

javascriptobjectthree.jstransparency

Angular does not alter the focus when a new component is loaded

Currently, I am working on resolving an accessibility issue with a screen reader in an Angular2 web application. When componentA (code shown below as Before) is loaded in Chrome, the entire browser window gains focus and the screen reader narrator announce ...

javascriptangularfocusaccessibility