Using Plotly.js to generate a visually stunning stacked and grouped bar chart

Is there a way to generate a bar chart on Plotly.js that features both grouped and stacked bars? Ideally, I am looking for a structure similar to the one shown here: Barchart with stacked and grouped charts

Answer №1

To create a grouped-and-stacked bar chart in Plotly.js, you can utilize subplots for each group. While it may not be as straightforward as using a single feature like 'barmode': 'stacked+grouped', this method offers more flexibility and customization options.

For a detailed tutorial on how to achieve this type of chart, visit

In this approach, each subplot shares a common y-axis but has its own x-axis. The x-axes are assigned a "domain," which corresponds to a portion of the overall width of the bottom axis. For example, the first group might have a domain of [0.0, 0.33], the second group [0.34, 0.66], and so on.

https://i.sstatic.net/5QyzU.png

   Plotly.newPlot(
  "myDiv",
  [
    {
      x: ["A", "B", "C"],
      y: [0.3, 0.35, 0.4],
      type: "bar",
      name: "series 1a", 
      xaxis: 'x1',
      barmode: 'stack', 
      marker: {color: '#448'}
    },
    {
      x: ["A", "B", "C"],
      y: [0.6, 0.50, 0.40],
      type: "bar",
      name: "series 1b", 
      xaxis: 'x1',
      barmode: 'stack', marker: {color: '#88C'}
    },
    {
      x: ["A", "B", "C"],
      y: [0.1, 0.15, 0.20],
      type: "bar",
      name: "series 1c", 
      xaxis: 'x1',
      barmode: 'stack', 
      marker: {color: '#CCF'}
    },
    {
      x: ["A", "B", "C"],
      y: [0.3, 0.35, 0.4],
      type: "bar",
      name: "series 2a",
      xaxis: 'x2',     
      barmode: 'stack', marker: {color: '#080'}
    },
    {
      x: ["A", "B", "C"],
      y: [0.25, 0.15, 0.05],
      type: "bar",
      name: "series 2b",
      xaxis: 'x2',     
      barmode: 'stack', marker: {color: '#8c8'}
    },
    {
      x: ["A", "B", "C"],
      y: [0.45, 0.50, 0.55],
      type: "bar",
      name: "series 2c", 
      xaxis: 'x2',
      barmode: 'stack', marker: {color: '#CFC'}
    },
     {
      x: ["A", "B", "C"],
      y: [0.3, 0.35, 0.4],
      type: "bar",
      name: "series 3a", 
      xaxis: 'x3',
      barmode: 'stack', marker: {color: '#880'}
    },
    {
      x: ["A", "B", "C"],
      y: [0.6, 0.50, 0.40],
      type: "bar",
      name: "series 3b", 
      xaxis: 'x3',
      barmode: 'stack', marker: {color: '#CC8'}
    },
    {
      x: ["A", "B", "C"],
      y: [0.1, 0.15, 0.20],
      type: "bar",
      name: "series 3c", 
      xaxis: 'x3',
      barmode: 'stack', marker: {color: '#FFC'}
    },
  ],
  {
    barmode: "stack",
    yaxis: {tickformat: '%'},
    xaxis: {
      domain: [0, 0.33],
      anchor: 'x1', 
      title: 'Apples'
    },
    xaxis2: {
      domain: [0.33, 0.66],
      anchor: 'x2', title: 'Pears'
    },
    xaxis3: {
      domain: [0.67, 1.0],
      anchor: 'x3', title: 'Cherries'
    }
  }
);

Answer №2

Updated Information for 2021: Plotly.js has introduced support for nested categorical axes, eliminating the need to create dedicated subplots with separate axes. Check out the details here:

https://i.sstatic.net/6GqDk.png

The chart displayed above showcases this new functionality.

Plotly.newPlot(
  "myDiv",
  [
    {
      x: [
        ["Apples","Apples","Apples","Pears","Pears","Pears","Dates","Dates","Dates"],
        ["East", "South","West","East", "South","West","East", "South","West"]
      ],
      y: [0.3, 0.35, 0.4,0.3, 0.35, 0.4,0.3, 0.35, 0.4],
      type: "bar",
      name: "Snack", 
      marker: {color: '#448'}
    },
    {
      x: [
        ["Apples","Apples","Apples","Pears","Pears","Pears","Dates","Dates","Dates"],
        ["East", "South","West","East", "South","West","East", "South","West"]
      ],
      y: [0.6, 0.50, 0.40,0.25, 0.15, 0.05,0.6, 0.50, 0.40],
      type: "bar",
      name: "Ingredient", 
      marker: {color: '#88C'}
    },
    {
      x: [
        ["Apples","Apples","Apples","Pears","Pears","Pears","Dates","Dates","Dates"],
        ["East", "South","West","East", "South","West","East", "South","West"]
      ],
      y: [0.1, 0.15, 0.20,0.45, 0.50, 0.55,0.1, 0.15, 0.20],
      type: "bar",
      name: "Garnish", 
      marker: {color: '#CCF'}
    }
  ],
  {
    barmode: "stack",
    yaxis: {tickformat: '%'},
    xaxis: {
      type: 'multicategory', 
      title: 'Fruit'
    },
    yaxis: {
      type: '', 
      range: [0,1],
      tickformat: "0.0%"
    }
  }
);

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

Consumer using ActiveMQ-Stomp is not receiving any messages

I attempted to create a JavaScript code for an ActiveMQ subscriber that would subscribe to a specific topic, but unfortunately I am not receiving any messages after establishing the connection. The topic that needs to be subscribed to is COO.2552270450083 ...

Using AJAX and PHP to dynamically fill HTML drop-down menus

In order to populate the DropDown controls on my HTML Form dynamically, I have implemented a code that utilizes AJAX to make a call to a .php file. This .php file is responsible for filling the DropDown control with values from a single column. Throughout ...

Having trouble with my ASP.Net OnClick Subs not functioning as desired

I have implemented onClick handlers to process button clicks that query SQL. The issue I am facing is that these queries sometimes take between 10 to 30 seconds to return a response. To prevent click-stacking during this time, I disabled the buttons. Howev ...

Teach Google Bot how to recognize AJAX content

I'm facing a major issue while developing a website for someone else. The problem lies in the modals that are supposed to open when a user clicks on a product. My goal is to ensure that Google Bot recognizes these modals as individual pages. When a mo ...

Mars Eclipse, AngularJS and the power of NodeJS

Could you please assist me in understanding the workings of node.js and angular.js within Eclipse? I am using Eclipse Mars and I would like to run my Angularjs project on a local server (localhost:8080) but I am unsure of how to accomplish this. I have a ...

Incorporate JSON data to display SVG images

As a beginner in web development, I have been honing my skills with the AngularJS framework due to its user-friendly nature. Currently, I'm working on pulling JSON data from an API using $http.get method. One of the fields contains an image source i ...

Transforming a jsonObject into a JavaScript array

I am working with a JSON object and I need to extract data from it to create an array. Here is an example of the desired array: ['city 1','city 2','city ..'] Below is the JSON output: {"\u0000*\u0000_data":[{"id": ...

Discover the versions of key libraries/modules within the webpack bundle

Is it possible to identify all the libraries, scripts, or modules included in a webpack bundle through the developer's console of a website that is already running, without access to its codebase? Additionally, is there a way to determine the version ...

Retrieving information from a Rowdatapacket with expressjs

Is there a way to use a loop to retrieve a single value from each row in RowDataPacket? Currently, my results look like this: [ RowDataPacket { id: 522, number: '111', test: 'testing' }, RowDataPacket { id: 523, number: '112' ...

Trigger the select dropdown when a key is clicked

I am currently working on a project in react where I am utilizing the Select component from material. When I open the dropdown and press a key on my keyboard, the option starting with that key gets automatically selected. This behavior is also observed in ...

Using Vue 3 to have the ability to include multiple composable instances in a single script tag

Currently in the process of revamping our components that are originally built using the Options API. A key point for refactoring from a code-cut perspective is how we handle our multiple modals, each with their own open/close and boolean logic scattered t ...

Using MongoDB in a feathers.js Hook

I'm struggling to make a feathers.js hook wait for a MongoDB call to complete before proceeding. I've tried using returns and promises, but so far nothing has worked. How can I ensure the hook waits for the database query to finish? ...

Issue with Many to Many Relation Query in Objection JS, Postgres, and Express Resulting in 'TypeError: Cannot Read Property 'isPartial' of Null' Error

I have a challenge connecting the 'products' table to the 'tags' table using a many-to-many relationship structure with the 'products_tags' table. Upon executing const product = await Product.relatedQuery('tags').fi ...

Organizing a Vue.js SPA project: Implementing Vuex store and API calls efficiently

Here is how I have organized the structure of my Vue app: components/ article/ AppList.vue common/ AppObserver.vue NoSSR.vue layout/ AppFooter.vue AppHeader.vue ui/ AppButton. ...

JavaScript - Retrieve the name of an object from a separate array

Is it possible to dynamically map rows and columns in a table component using arrays of objects? For example, I have two arrays of objects like this: const columnData = [ { id: 'name', label: 'Name' }, { id: 'value', lab ...

The process of AJAX polling a JSON-returning URL using jQuery's $.ajax() method does not appear to provide up-to-date responses

I am currently working on a project that involves polling a specific URL for a JSON response using AJAX. The initial AJAX request alerts the server of my need for JSON content, prompting it to start building and caching the response. Subsequent AJAX reques ...

Redux - Preventing Overwriting of Product Quantity in Cart by Creating a New Object

Is there a way to address the issue where adding the same product multiple times to the cart creates new objects instead of increasing the quantity? switch (action.type) { case actionTypes.ADD_TO_CART: const product = state.products.find((p) = ...

Deactivate the second subradio button when the first option is selected and vice versa

Need some assistance, hoping for your help. I have 2 choices with subcategories. 1 - Option A ---- variant 1 ---- variant 2 ---- variant 3 2 - Option B ---- variant 4 ---- variant 5 ---- variant 6 Check out my code here Users must choose betwe ...

The Angular directive was unable to reach the controller located higher up in the DOM hierarchy

template <section id="content" ng-controller="ReservationController as resvnCtrl" > <form role="form" name="resvnCtrl.form"> <div data-date-picker> </div> ...

Determine the Placement of Bootstrap Popover by Utilizing SVG and Mouse Coordinates

Is there a way to dynamically reposition the popover that currently appears to the right of the Circle SVG? I would like to either base its position on the user's mouse click within the CircleSVG or move it to the exact center of the SVG, including bo ...