FR: Stacked and grouped barplots #1835

Activity

1. etpinard commented on Jun 29, 2017

   

   etpinard

   on Jun 29, 2017

   Contributor

   More actions

   Would be nice!

   See related:

   • Make base of bars configurable #475
   • relative barmode to stack negative values below axis #517
2. etpinard

   added

   featuresomething newsomething new

   on Jun 29, 2017
3. mojoaxel commented on Mar 12, 2018

   

   mojoaxel

   on Mar 12, 2018

   Last edited by mojoaxel

   Contributor

   More actions

   Here is a screenshot to demonstrate what this feature request is for:
   
   Here are some related community entries for this topic:

   • community.plot.ly #2154
   • community.plot.ly #117
   • community.plot.ly #1625
4. protobi-pieter commented on May 2, 2018

   

   protobi-pieter

   on May 2, 2018

   Last edited by protobi-pieter

   More actions

   It is possible to create a grouped-and-stacked bar chart in Plotly.js by creating each group as a subplot. It's not as simple as setting a top-level feature like 'barmode': 'stacked+grouped' but because it's more elemental it offers more options.

   Here each subplot references a shared common yaxis and its own xaxis. Each xaxis gets a "domain" which here means a portion of the overall bottom axis width. Here the first group gets [0.0, 0.33], the second [0.34, 0.66] and the third [0.67, 1.0]

   

   https://codepen.io/__proto__/pen/XqgWEq

   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'
       }
     }
   );

   👍React with 👍7Reacted by cbonilla-catalogue, Jared McKimm, David Meza, Fabrice Sodogandji, Awalin Shopan, Alexander Serov and Reetika Sarkar-Bermudez

   ❤️React with ❤️14Reacted by Alexander Wunschik, luis-lopez09, Paulo Vieira, Lies, carlosbettin, Evan Baker, terenceng2010, cbonilla-catalogue, brandondaypeak, Fabrice Sodogandji and 4 more
5. etpinard commented on Mar 28, 2019

   

   etpinard

   on Mar 28, 2019

   Last edited by etpinard

   Contributor

   More actions

   Merging into #3614 - which will make stack+group bars possible
6. etpinard

   closed this as completedon Mar 28, 2019
7. arushiS27 commented on Jul 17, 2019

   

   arushiS27

   on Jul 17, 2019

   More actions

   I am trying to use this layout for my json data but I am unable to get the right graph... Instead of xaxis: x1 ... I need xaxis: Code and xaxis: test but i am not getting as I think there is some link to xaxis: x1 ... which cannot be changed .. Please help me how to make it work