Insert a fresh set of data to the top of a highcharts stacked column chart

Is there a way to control the order in which new series are added to a stacked column chart in Highcharts? Currently, using addSeries places the new series at the bottom of the stack. Here's a simplified example of what I'm working on:

var chart = new Highcharts.Chart({

    chart: {
        type: 'column',
        renderTo: 'container'
    },

    xAxis: {
        categories: ['Jan', 'Feb', 'Mar']
    },

    plotOptions: {
        series: {
            stacking: 'normal'
        }
    },

    series: [{
        name: 'base',
        data: [10, 20, 30]
    }, {
        name: 'sec',
        data: [30, 20, 10]
    }]
});

var i = 0;
$('#add').on('click', function (e) {
    chart.addSeries({
        data: [32, 43, 42],
        name: ++i,
        index: 0 //??????
    });
});

Here's a fiddle demonstrating this issue: http://jsfiddle.net/6bCBf/

Does anyone have any suggestions for reversing or controlling where the new series is inserted by Highcharts?

I've attempted setting the index of the new series to 0 without success. Setting it to -1 adds the series to the bottom of the array, but then the "stacking" functionality doesn't work as intended.

Answer №1

To maintain the order between layers, you can define index and zIndex values and then include a series with the appropriate parameters.

For instance, refer to this example: http://jsfiddle.net/6bCBf/5/

var chart = new Highcharts.Chart({

    chart: {
        type: 'column',
        renderTo: 'container'
    },

    xAxis: {
        categories: ['Jan', 'Feb', 'Mar']
    },

    plotOptions: {
        series: {
            stacking: 'normal'
         }
     },    

    series: [
        {
            name: 'base',
            data: [10, 20, 30],
            index:2,
            zIndex:10
        },
        {
            name: 'sec',
            data: [30, 20, 10],
            index:1,
            zIndex:9
        }
    ]
},function(chart){



    $('#add').on('click', function (e) {

        chart.addSeries({
            data: [32, 43, 42],
            index: 0,
            zIndex:1
        });
    });


});

Answer №2

One interesting feature of Highcharts is the yAxis.reversedStacks property, which can be set to false to reverse the stacking order of data points. In a particular JSFiddle example, the first series, named "base", was originally positioned on top of the chart with the second series, "sec", below it. By changing the setting to reversedStacks: false, showcased in this updated JSFiddle, the order is reversed and the new series now appears at the top of the stack instead of the bottom.

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

The presence of multiple renderings occurring due to Google Maps InfoBox and an AJAX call

I'm encountering a problem with my implementation of the InfoBox and I'm looking for insights on potential solutions. Currently, I have around 1000 client-side markers that are dynamically added to the page. They are created using the following ...

How can I dynamically insert table rows using React JS?

Looking to enhance the registration form design in react js by optimizing the code. Currently, the approach involves using numerous tr and td within the form. Seeking to improve efficiency by incorporating the javascript map function to have each row con ...

Querying Using Multiple Filter Selectors

Currently, I am in the process of developing a jQuery multiple filter module and have encountered a logic gap in my framework. Within this module, there are numerous div elements each containing data-x and data-y attributes. For instance: <div class= ...

Guide to adding information to an Excel sheet using JavaScript

I am encountering an issue with writing data into an xls sheet in the correct format. Please refer to the image below for the problem: View my xls sheet Here is the code snippet causing the problem: var readString = ''; readString = "Nam ...

Is there a way to place my searchbox in the top right corner of the page?

I am currently working on creating a search function for my list of products. However, I have encountered an issue where the searchBox is not appearing in the top right corner as intended. Despite trying various solutions, I have been unsuccessful in movin ...

Using Jest: A guide to utilizing a mocked class instance

When working on my frontend React application, I decided to use the auth0-js library for authentication purposes. This library provides the WebAuth class which I utilize in my code by creating an instance like so: import { WebAuth } from 'auth0-js&ap ...

Making jQuery work: Utilizing tag replacements

My current code is: this.html(this.html().replace(/<\/?([i-z]+)[^>]*>/gi, function(match, tag) { return (tag === 'p') ? match : '<p>'; return (tag === '/p') ? match : '</p& ...

Accessing a Variable in one JavaScript File from Another JavaScript File

In the process of creating a basic game using only JavaScript and jQuery, I have split it into two separate pages. The first page contains all the rules and necessary information, while the second page is where the actual game takes place. My goal is to in ...

Images added with JavaScript are not displaying on the webpage

On the website I'm working on, I am attempting to use Javascript to insert an image. My method involves using createElement and setAttribute to specify the image location in my file directory. Below is a snippet of the code I've been using: var l ...

Splitting a Multidimensional Array in JavaScript into Two Separate Arrays

I received an array from an ajax call (data) that I need to split into two parts: An alert showing the data reveals: [[200326,150000],[200327,150000],[200328,150000],[200329,150000],[200330,160000],[200331,320000]] I attempted to extract the dates (fi ...

NextJS build problem causing all content to become static

As a newcomer to NextJS with prior experience in basic React apps, I recently attempted to deploy a CRUD NextJS app (utilizing prisma and mongoDB). Everything runs smoothly with npm run dev, but issues arise when transitioning to npm run build followed by ...

What is the most efficient way to retrieve key pair values of separate elements in an array with just one API request?

The API I am working with returns an array of elements, each containing multiple key-value pairs. An example of a similar API response can be seen here: , where an array of poems is returned. [ { "title": "...." "content": "..." "url" : "..." } ...

"My PHP headers are not working properly when I try to

When I invoke a script with JavaScript var user = document.getElementById('username').value; var pass = document.getElementById('password').value; var conf = document.getElementById('confirm').value; var code ...

Angular directive loading twice because of nested directive in Javascript and $compile issue

I am encountering an issue with directives nested within directives. In order to meet the requirements of our designers, I need the contents to be direct children of the DOM node. <div> <my-directive style="color: blue;"> <p> ...

Transmit JSON data through a REST API request body

Looking to send a JSON request via REST, with client code in Node.js and server code in Golang. The structure of the body is as follows: const query = "{\"query\":\"query {n result: application(id: \"fb7b5992-4d0a-4782-acb7-13ae6cc66 ...

Before inserting a string into JSON in PHP, the length of the string should be included

When sending a POST variable containing a JavaScript dictionary to a PHP file via Ajax, the value of this POST variable is being parsed as a PHP dictionary. However, I noticed that the length of each String value is added before the actual string in the PH ...

The pinFileToIPFS method in Pinata IPFS is currently unable to accept files uploaded by users

Currently, I am immersed in a project where I am utilizing React.js, Express.js, and Node.js to transform a user-provided image into an NFT on the Ethereum blockchain. To achieve this, I must first upload the image to IPFS (Pinata being my choice of servic ...

What are some best practices for enhancing the elegance of this JS code?

Within my React app that utilizes Material UI components, I created a code snippet to handle the sizing of contact form fields. These fields are dynamic elements that can be added or removed based on certain configurations. Although the code I implemented ...

adjust variable increment in JavaScript

As I work on developing a Wordpress theme, I have encountered an issue with incrementing a load more button using Javascript. This is my first time facing this problem with a javascript variable, as I don't always use Wordpress. The variable pull_page ...

The Tailwind Rebuild journey never comes to a halt

I have been using Tailwind for the css in my Flask app. Everything was working fine until recently when I started experiencing issues with Tailwind. Usually, when I run a tailwind build script for my app, it updates the css if there are any changes in the ...