Receiving data dynamically from Highcharts results in an additional legend appearing in the chart display

I am currently looking for a solution to dynamically create highcharts series in my project. Although I have tried using the addSeries method, I am encountering an issue where an extra legend is appearing unnecessarily. If you are aware of any alternative methods that could help me resolve this problem, please share them with me. I have only provided a snippet of my chart code here without including the total code. Here, I am simply adding my series to the chart.

            $(function () {
                chart = Highcharts.chart('container', {
                    series: [
                        {
                        }
                    ]

                });
            });


json:
    "dataa": 
    [
        {
            "name": "Unit Test 1",
            "data":[1,13,15,17,40,50,80]
        },
        {
            "name": "Unit Test 2",
            "data":[2,20,50,40,20,50,15]
        },
        {
            "name": "Unit Test 3",
            "data":[3,50,40,10,30,40,25]
        }
    ]

ajax:
 let dataeDatal=datae.dataa.length;
            for (let i = 0; i < dataeDatal; i++) {
                chart.addSeries({
                    data: datae.dataa[i].data,
                    name: datae.dataa[i].name
                });
            }
        }

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

In the attached image, you can see that there is an additional 'series1' legend being displayed, which needs to be resolved.

Answer №1

It is recommended to start your charts by initializing them like this:

chart = Highcharts.chart('container', {
  series: [] // make sure the series property is an empty array
});

Check out this demo on JSFiddle

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

Is there a way to verify the presence of any ongoing AJAX requests using jQuery?

Attempting to perform a specific action: var function some_action() { // ... } However, this action must wait for all ajax calls to finish. To address this requirement, I have implemented the following approach: $(document).one('ajaxStop', ...

Guard your website against Backdoor/PHP.C99Shell, also known as Trojan.Script.224490

Recently, my website fell victim to a trojan script infiltration. Someone maliciously inserted a file named "x76x09.php" or "config.php" into the root directory of my webspace. This file, with a size of 44287 bytes and an MD5 checksum of 8dd76fc074b717fcc ...

Breaking a string into separate parts using various layers of delimiters

I am currently facing an issue with this specific string: {1 (Test)}{2 ({3 (A)}{4 (B)}{5 (C)})}{100 (AAA{101 (X){102 (Y)}{103 (Z)})} My goal is to divide it using { as the initial delimiter and } as the final delimiter. However, there are nested brackets ...

Adding associated documents into MongoDB from an Express application

My mongo db schema is structured as follows: users: {username:"", age: "", data: [ {field1:"", field2:""}, {field1:"", field2:""} ] } I am facing an issue with sending my user object to my express route for posting data to the database. ...

When a webpage loaded through ajax, an error may occur indicating that Javascript functions are not

The functions have been defined and are functioning properly. However, when the same page is loaded via ajax, an error stating callA is not defined appears in the firebug console. I'm puzzled as to why this works in one scenario but not the other. Am ...

I am looking to share videos and large files without the use of a flash plugin

Looking for a way to upload videos without using the Flash Plugin and without relying on the browser's default browse button, especially for large files. It would be great to have a progress bar displayed during the upload process. Alternatively, is ...

A Sinon spy allows for the use of two distinct callback signatures

const sinon = require('sinon') function testCallbacks (useFunction) { useFunction(function (req, res) { return true }) useFunction(function (err, req, res, next) { return false }) } testCallbacks() I am looking for a method ...

React: Issue with input values not correctly updating across multiple fields when changing state toggles

I am working on a React component that needs to update input values for multiple players independently. However, I am facing an issue where toggling a state causes the first input's value to incorrectly propagate to all other inputs. Additionally, cle ...

Discovering the source DOM element that initiated ng-change

I am currently working with angularJS and have multiple <select> elements on my webpage, each with its own ng-change function. Here is an example: <select id="hairColorComponent" ng-model="hairColor" ng-options="option.name for option in ...

Show the Canvas element at the back of the DIV

This particular question requires a clear explanation. My goal is to have the canvas act as a background element on the page, while the main content of the page starts in its usual position. I attempted using separate DIVs with their own Z-index values, bu ...

Retrieve and showcase Json data from two different nodes using Ajax

I'm struggling to show the data from json properly. The title displays correctly, but item.volumeInfo.industryIdentifiers.type is coming back as undefined. $.ajax({ url: 'https://www.googleapis.com/books/v1/volumes?q=:isbn=0-13-727827-6', d ...

Incorporating AJAX in jQuery mobile to transmit data to a controller in CodeIgniter

I'm currently facing an issue where despite successfully retrieving the latitude and longitude values from the geolocation feature in Google Chrome, I am unable to pass these values to the index function within the controller named Add. When attemptin ...

Enhance your web forms with jQuery Chosen's automatic formatting feature

Having trouble adding a feature to my multi-select input box using jQuery Chosen. The current functionality allows users to enter custom values not in the list. The new feature should automatically format numbers entered by users, for example: User input ...

Next.js encountered a Runtime Error: Trying to access properties of undefined (specifically 'status') and failing

For those interested in viewing the code, it can be found here During the creation of a portfolio website using Next.js, I encountered an error. I am utilizing the latest version of Next.js (next 13.4.16) and incorporating the app router into my project. ...

Is there a way to trim the current shapes in three.js?

I have created a shape similar to this using Box Geometry at the following link: https://jsfiddle.net/cdu96z3c/. I am looking to achieve a design like the image below by properly utilizing v.x and v.z, while maintaining the current corrugation and properti ...

What is the best way to merge angularjs modules?

In my angularjs application using the codeigniter PHP framework, I have implemented 3 modules - cars.js for car details, cellphones.js for cellphone details, and home.js for home details. Each module caters to a different client's needs. I am trying ...

Creating a dynamic configuration for Highchart within an Angular UI grid with the help of AngularJS utilizing the valuable Highcharts NG tool developed by pablo

In my controller, I have created the following code to set up an angular ui-grid - function fetchData() { $scope.data = []; $scope.columns = []; $scope.gridOptions = { data: 'data', useExternalSorting: true, ...

Maximizing the potential of NestJS apps with Docker

I am working on a NestJS project that consists of multiple apps structured as follows: my-project: -- apps; --- app-one ---- src ---- tsconfig.app.json --- app-two ---- src ---- tsconfig.app.json -- libs -- package.json -- etc... Within this project, I ha ...

Tips on resolving JavaScript's failure to adjust to the latest HTML inputs

I'm working on a homepage where users can choose their preferred search engine. The issue I'm facing is that even if they switch between search engines, the result remains the same. I've experimented with if-then statements, but the selecti ...

Revamp the HTML table with JavaScript headers

I imported data from a CSV file into an HTML table and here is how it appears: <div id="myTable" style="-ms-overflow-x: auto;"> <table> <tbody> <tr class="rownum-0"> <td>Make</td> ...