Plotly.js: FR: Stacked and grouped barplots

[fabiangehring]

As far as I know stacked and grouped barplots (at same time) are not possible in plotly at the moment. This would be a very nice feature:

Comparable to:
Stacked and grouped

[etpinard]

Would be nice!

See related:

• https://github.com/plotly/plotly.js/issues/475
• https://github.com/plotly/plotly.js/pull/517

[mojoaxel]

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

[pietersv]

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

[etpinard]

Merging into https://github.com/plotly/plotly.js/issues/3614 - which will make stack+group bars possible

[arushiS27]

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