Column bar with line stacked on top

Can a stacked column be displayed with two line graphs in a stacked format? Is it possible to still see changes in each line graph when interacting with the combination of stacked columns and line graphs, even if some elements are hidden from the stacked column scale?

For more information, you can take a look at this link that may provide further clarity. Thank you for any assistance.

I have searched for examples of this scenario but everywhere I look only shows changes in the stacked columns while the line graph remains unaffected.

Answer №1

To generate a chart with stacked columns and two lines, specify the appropriate number of series and enable stacking for column ones. Here's an example:

Highcharts.chart('container', {
  plotOptions: {
    column: {
      stacking: 'normal'
    }
  },
  series: [{
    type: 'line',
    data: [...]
  }, {
    type: 'line',
    data: [...]
  }, {
    type: 'column',
    data: [...]
  }, {
    type: 'column',
    data: [...]
  }, ...]
});

See it in action: http://jsfiddle.net/BlackLabel/jL0sq2vo/

Learn more: https://www.highcharts.com/docs/chart-concepts/series


If you're unsure about how the line series are linked to the column ones in your situation, you can utilize the show / hide series events to make adjustments to the line series data. For instance:

plotOptions: {
  column: {
    stacking: 'normal',
    events: {
      show: function() {
        const series = this.chart.series;

        baseLine1 = baseLine1.map(el => el + 1);
        baseLine2 = baseLine2.map(el => el + 1);

        series[0].setData(baseLine1, false);
        series[1].setData(baseLine2);
      },
      ...
    }
  }
}

See live demo: http://jsfiddle.net/BlackLabel/rg4mdaov/

Check out the API Reference: https://api.highcharts.com/class-reference/Highcharts.Series#setData

Answer №2

To satisfy the condition, adjust the dataSource of line series in legendClick according to the Stacking column.

Refer to the attached sample and code snippet below for guidance.

legendClick: (args) => {

        let value;

       for (let i =0 ; i<clickedIndex.length; i++ ){

           if (clickedIndex[i] === args.series.index )

           {

            value = true;

            clickedIndex.splice(i, 1);

            clickedIndexCount--;

           }

       }

       if (!value) {

       // clickedIndex = args.series.index;

        clickedIndex[clickedIndexCount] = args.series.index;

        clickedIndexCount++;

       }

       chart.refresh();

}

Upon Legend Click: Line series reflects visible column value

Prior to Legend Click: Line series is based on an average of two columns

Example: https://stackblitz.com/edit/z7svdm-z9aah7?file=index.ts

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

Updating multiple collections in MongoDBRestructuring data across multiple

Imagine a scenario where an API call must update two different collections. It's crucial that if one update fails, the first update needs to be reverted. How can I guarantee that both operations either complete successfully or none at all? Let me prov ...

Passing the socket.io instance to an express route

I am currently working on developing a nodejs application that will utilize various web APIs to search for information. The goal is to send the results to the client in real-time using socket.io, with jQuery handling the front end display of the data. Wha ...

The functionality of three.js Raycaster appears to be dependent on the initial key frame of animation in every instance

In my current project, raycasting selection works perfectly fine for static meshes. However, when it comes to animated meshes, the ray selection seems to ignore the movement of the mesh and only recognizes the original position of the mesh. The issue aris ...

Creating an array dynamically in response to an AJAX call

Is there a way to dynamically create an array after receiving an AJAX response? Upon getting the AJAX response, the variable data.villages contains the data. To iterate over its values, the jQuery each function can be used: $.each(data.villages, functio ...

The contact form fails to transmit preset values

I am currently working on a form that is functional, but it does not send predefined values. Some fields have predefined values such as the user and total amount. While it does send the values entered by the user, it doesn't include the predefined one ...

Showing various divisions based on the selected option from a dropdown menu

My goal is to have forms display below a select tag based on the number selected by the user. I am attempting to achieve this using JQuery, but it's currently not functioning as expected: Select tag:- <label>How many credit cards do you have:* ...

Update the input field's placeholder with the current date

Is it possible to dynamically set the placeholders for <input type='date' placeholder='{{ 'currentDate' }}'>? I have tried using the following variable: currentDate = this.datePipe.transform(new Date(), "yyyy-MM-dd& ...

Struggling with auto-focus when toggling v-show in Vue.js

It's odd, the autofocus feature for my input fields doesn't seem to work when I switch between displayed elements. Check out the fiddle link here: https://jsfiddle.net/e53Lgnnb/6/ Code: HTML: <body> <!-- Email [POST] --> <div cl ...

Attempting to conditionally map an array of objects

I am currently working on conditionally rendering content on a screen. My main task involves manipulating an array of 3 objects with sub-objects, stored as the initial state in my reducer (using dummy data). The layout includes a customized SideNav bar wit ...

I need to mass upload a collection of resumes stored in a zip file, then extract and display the content of each resume using a combination of HTML

I recently used a service to extract and retrieve the contents of a zip file. I am trying to read the content of the files and integrate them into the scope of my Angular project. Any suggestions would be greatly appreciated. Below is an outline of my func ...

Modifying the maxHeight property of the angular-gantt component does not yield any noticeable changes

I am currently experiencing issues with dynamically changing the height using the angular-gantt library. Despite setting a new value for the maxHeight attribute in the controller, it does not reflect on the view as expected. I have seen this feature work i ...

Ways to retrieve a single variable periodically and refresh it at intervals

One common issue faced by maintenance employees at my company is losing their log entry if they receive a call or text while filling out the daily form on their phones. To solve this problem, I came up with a solution to store the form values in PHP SESSIO ...

What is the best way to retrieve the most recent value in a MongoDB aggregation?

In my collection, some documents have a status field while others do not. However, all documents contain a data field. I am trying to construct a query that retrieves the most recent values for both fields. The issue arises when using the $last operator, a ...

JavaScript allows for the dynamic addition of foreign objects to an SVG

After running this code initially, it displays a blank screen, but when I make updates using the developer tool in Chrome, the data appears. Can someone provide an explanation as to why this happens? Could it be related to the DOM running again in the br ...

Tips for pulling information from two different services using an identification number and showcasing the data

Looking for a way to select data in AngularJS (JavaScript) similar to PHP's SELECT "message" FROM "users" WHERE id = $id? Here is my current setup: app.service("users", function() { this.userList = [ { userId: 1, u ...

Is it possible to use Ajax post with localhost on Wamp server?

Looking to execute a basic POST function using Ajax on my localhost WAMP server. Here's the code I have: function fill_table() { var xmlhttp; if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari ...

Automatically submitting Ajax form upon loading the page

I am attempting to use ajax to automatically submit a form to a database upon page load. The form and php code work perfectly when manually submitted, but for some reason, the ajax function does not trigger. Despite checking the console for errors and con ...

Creating metadata for a node/npm module build

Looking for a solution to output JSON with build date and updated minor version number using grunt and requirejs for our application. It seems like this would be a common requirement. Any existing tools that can achieve this? ...

Problem arises when attempting to slice an array that is defined in the parent component

Seems like a simple mistake, but here's what happened: In the main parent component, I have an array defined: ... <object-list-grid v-bind:objects="objectsList" ></object-list-grid> ... data() { return { ... ...

Inconsistent behavior between Chrome and Firefox when using AngularJS $resource GET method: success in Chrome but error

I am currently working on a simple custom GET request in Angular using $resource angular.module('myApp') .factory('MyService', function($resource){ return $resrouce('some url', {}, { list: {method:'G ...