title: Amcharts Combining Stacked and Clustered
body: <p>I have been working on a chart that is not available in AmChart 4/5 Demos, similar to Stacked + Clustered Bar Chart, but a different approach.
  I really wanted to create this with AmChart Library.</p>
  <p>Here is the sample I wanted to achieve;
  I made this with javascript and html/css.
  <a href="https://i.stack.imgur.com/AIaaC.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/AIaaC.png" alt="enter image description here" /></a></p>
  <p>I hope someone can help me plot this to AmChart 4 or 5.</p>
  <p>Thank you,</p>
  <p><strong>Code Sample Here;</strong></p>
  <blockquote>
  <p>Data Array</p>
  </blockquote>
  <pre><code>var data_test = [
              {
                  'name': 'Label 01',
                  'code': 1,
                  'months': [
                      {'name': 'Jan',
                          'stacked': [
                              {'name': 'delieveredper', 'value': '45%', 'color': '#ebab34'},
                              {'name': 'openper', 'value':  '20%', 'color': '#34eb68'},
                              {'name': 'clickper', 'value':  '5%', 'color': '#34cdeb'},
                          ]
                      },
                      {'name': 'Feb',
                          'stacked': [
                              {'name': 'delieveredper', 'value': '35%', 'color': '#ebab34'},
                              {'name': 'openper', 'value':  '10%', 'color': '#34eb68'},
                              {'name': 'clickper', 'value':  '5%', 'color': '#34cdeb'},
                          ]
                      },
                  ]
              }, {
                  'name': 'Label 02',
                  'code': 2,
                  'months': [
                      {'name': 'Jan',
                          'stacked': [
                              {'name': 'delieveredper', 'value': '65%', 'color': '#ebab34'},
                              {'name': 'openper', 'value':  '20%', 'color': '#34eb68'},
                              {'name': 'clickper', 'value':  '15%', 'color': '#34cdeb'},
                          ]
                      },
                      {'name': 'Feb',
                          'stacked': [
                              {'name': 'delieveredper', 'value': '45%', 'color': '#ebab34'},
                              {'name': 'openper', 'value':  '20%', 'color': '#34eb68'},
                              {'name': 'clickper', 'value':  '12%', 'color': '#34cdeb'},
                          ]
                      },
                  ]
              }, {
                  'name': 'Label 03',
                  'code': 2,
                  'months': [
                      {'name': 'Jan',
                          'stacked': [
                              {'name': 'delieveredper', 'value': '65%', 'color': '#ebab34'},
                              {'name': 'openper', 'value':  '20%', 'color': '#34eb68'},
                              {'name': 'clickper', 'value':  '15%', 'color': '#34cdeb'},
                          ]
                      },
                      {'name': 'Feb',
                          'stacked': [
                              {'name': 'delieveredper', 'value': '45%', 'color': '#ebab34'},
                              {'name': 'openper', 'value':  '20%', 'color': '#34eb68'},
                              {'name': 'clickper', 'value':  '12%', 'color': '#34cdeb'},
                          ]
                      },
                  ]
              }, {
                  'name': 'Label 04',
                  'code': 2,
                  'months': [
                      {'name': 'Jan',
                          'stacked': [
                              {'name': 'delieveredper', 'value': '65%', 'color': '#ebab34'},
                              {'name': 'openper', 'value':  '20%', 'color': '#34eb68'},
                              {'name': 'clickper', 'value':  '15%', 'color': '#34cdeb'},
                          ]
                      },
                      {'name': 'Feb',
                          'stacked': [
                              {'name': 'delieveredper', 'value': '45%', 'color': '#ebab34'},
                              {'name': 'openper', 'value':  '20%', 'color': '#34eb68'},
                              {'name': 'clickper', 'value':  '12%', 'color': '#34cdeb'},
                          ]
                      },
                  ]
              }, {
                  'name': 'Label 05',
                  'code': 2,
                  'months': [
                      {'name': 'Jan',
                          'stacked': [
                              {'name': 'delieveredper', 'value': '65%', 'color': '#ebab34'},
                              {'name': 'openper', 'value':  '20%', 'color': '#34eb68'},
                              {'name': 'clickper', 'value':  '15%', 'color': '#34cdeb'},
                          ]
                      },
                      {'name': 'Feb',
                          'stacked': [
                              {'name': 'delieveredper', 'value': '45%', 'color': '#ebab34'},
                              {'name': 'openper', 'value':  '20%', 'color': '#34eb68'},
                              {'name': 'clickper', 'value':  '12%', 'color': '#34cdeb'},
                          ]
                      },
                      {'name': 'Mar',
                          'stacked': [
                              {'name': 'delieveredper', 'value': '45%', 'color': '#ebab34'},
                              {'name': 'openper', 'value':  '20%', 'color': '#34eb68'},
                              {'name': 'clickper', 'value':  '12%', 'color': '#34cdeb'},
                          ]
                      },
                  ]
              }, {
                  'name': 'Label 06',
                  'code': 2,
                  'months': [
                      {'name': 'Jan',
                          'stacked': [
                              {'name': 'delieveredper', 'value': '65%', 'color': '#ebab34'},
                              {'name': 'openper', 'value':  '20%', 'color': '#34eb68'},
                              {'name': 'clickper', 'value':  '15%', 'color': '#34cdeb'},
                          ]
                      },
                      {'name': 'Feb',
                          'stacked': [
                              {'name': 'delieveredper', 'value': '45%', 'color': '#ebab34'},
                              {'name': 'openper', 'value':  '20%', 'color': '#34eb68'},
                              {'name': 'clickper', 'value':  '12%', 'color': '#34cdeb'},
                          ]
                      },
                      {'name': 'Mar',
                          'stacked': [
                              {'name': 'delieveredper', 'value': '35%', 'color': '#ebab34'},
                              {'name': 'openper', 'value':  '20%', 'color': '#34eb68'},
                              {'name': 'clickper', 'value':  '12%', 'color': '#34cdeb'},
                          ]
                      },
                  ]
              }
          ];
  </code></pre>
  <blockquote>
  <p>Javascript;</p>
  </blockquote>
  <pre><code>var chartdiv = $('#chartdiv', document);
  var data = data_test;
  
              var cnt_team = data.length;
              var width_team = 100/Number(cnt_team) + '%';
  
              chartdiv.html('');
  
              var team_box = '';
  
              team_box += '&lt;div class=&quot;legends&quot; style=&quot;text-align: center; vertical-align: middle;&quot;&gt;';
              for(lc = 0; lc&lt;data[0].months[0].stacked.length; lc++) {
                  var data_legend_color = data[0].months[0].stacked[lc].color;
                  var data_legend_name = data[0].months[0].stacked[lc].name;
                  team_box += '&lt;a href=&quot;javascript:;&quot; class=&quot;legend-item&quot; data-text=&quot;'+data_legend_name+'&quot;&gt;  &lt;div class=&quot;legend-box&quot; style=&quot;background-color: '+data_legend_color+'&quot;&gt;&lt;/div&gt; ' + data_legend_name + '&lt;/a&gt;';
              }
              team_box += '&lt;/div&gt;';
              team_box += '&lt;br&gt;';
              team_box += '&lt;table width=&quot;100%&quot; class=&quot;table-graph&quot; style=&quot;height: 75%; display: block;&quot;&gt;';
              team_box += '&lt;tbody style=&quot;height: 100%; width: 100%; display: inline-block;&quot;&gt;';
              var team_length = data.length;
              if(team_length&gt;0) {
                  team_box += '&lt;tr style=&quot;height: 100%; width: 100%; display: flex&quot;&gt;';
                  team_box += '&lt;td style=&quot;width: 80px; text-align: right; padding-top: 35px; padding-bottom: 20px;&quot; valign=&quot;bottom&quot;&gt;';
                  var li_height = 100;
                  for(li = 0; li &lt;= 10; li++) {
                      team_box += '&lt;div class=&quot;value-label&quot;&gt;'+li_height+'%&lt;/div&gt;';
                      li_height = Number(li_height) - 10;
                  }
                  team_box += '&lt;/td&gt;';
                  for (i = 0; i &lt; team_length; i++) {
                      team_box += '&lt;td style=&quot;padding: 0px 5px;&quot; style=&quot;height: 100%;&quot; width=&quot;'+width_team+'&quot; valign=&quot;bottom&quot;&gt;';
                      var team_monthly_length = data[i].months.length;
                      var team_monthly_width = (100 / Number(team_monthly_length) - 1) + '%';
  
                      if (team_monthly_length &gt; 0) {
                          // MONTHLY TABLE
                          team_box += '&lt;table class=&quot;table-monthly&quot; width=&quot;100%&quot; style=&quot;height: 100%;&quot; style=&quot;height: 100%; display: inline-block;&quot;&gt;';
  
  
                          team_box += '&lt;tr&gt;';
                          for (fmi = 0; fmi &lt; team_monthly_length; fmi++) {
                              team_box += '&lt;td class=&quot;month-name&quot; valign=&quot;bottom&quot; width=&quot;'+team_monthly_width+'&quot;&gt;';
                              team_box += '&lt;span&gt;'+data[i].months[fmi].name+'&lt;/span&gt;';
                              team_box += '&lt;/td&gt;';
                          }
                          team_box += '&lt;/tr&gt;';
  
                          team_box += '&lt;tr style=&quot;height: 100%; width: 100%;&quot;&gt;';
                          for (mi = 0; mi &lt; team_monthly_length; mi++) {
                              team_box += '&lt;td class=&quot;td-month-wrapper&quot; style=&quot;height: 100%;&quot; width=&quot;'+team_monthly_width+'&quot;&gt;';
                              team_box += '&lt;div class=&quot;td-month-div&quot;&gt;';
                              var ms_length = data[i].months[mi].stacked.length;
  
                              var pos_bott = 0; // 1st element position to bottom;
                              for (ms = 0; ms &lt; ms_length; ms++) {
                                  var data_value = data[i].months[mi].stacked[ms].value;
                                  var data_name = data[i].months[mi].stacked[ms].name;
                                  var data_color = data[i].months[mi].stacked[ms].color;
                                  var data_height = Math.round(data_value/1.7);
                                  if (data_value &gt; 0) {
                                      team_box +=  '&lt;a id=&quot;stack_item_'+ms+'&quot; data-index=&quot;'+ms+'&quot; class=&quot;stacked-category animate_animated animate__slideInUp '+data_name+'&quot; href=&quot;javascript:;&quot; data-toggle=&quot;popover&quot; data-container=&quot;body&quot; data-trigger=&quot;hover&quot; data-content=&quot;' + data_name + ' : &lt;b&gt;' + data_height + '%&lt;/b&gt;&quot; style=&quot;bottom: '+pos_bott+'%; background: ' + data_color + '; height: ' + data_height + '%&quot;&gt;';
                                      team_box += '&lt;span class=&quot;stacked-category-value animate__animated animate__bounceIn hidden&quot;&gt;' + data_height + '%&lt;/span&gt;';
                                      team_box +=  '&lt;/a&gt;';
                                      pos_bott += data_height;
                                  }
  
                              }
                              team_box += '&lt;/div&gt;';
                              team_box += '&lt;/td&gt;';
                          }
                          team_box += '&lt;/tr&gt;';
                          team_box += '&lt;/table&gt;';
                      }
                      team_box += '&lt;/td&gt;';
                  }
                  team_box += '&lt;/tr&gt;';
                  team_box += '&lt;tr style=&quot;width: 100%; display: flex&quot;&gt;';
                  team_box += '&lt;td style=&quot;width: 80px;&quot;&gt;&lt;/td&gt;';
                  for (fi = 0; fi &lt; team_length; fi++) {
                      team_box += '&lt;td style=&quot;padding: 10px 10px;&quot; width=&quot;'+width_team+'&quot; valign=&quot;top&quot;&gt;';
                      team_box += '&lt;p class=&quot;team-name&quot;&gt;' + data[fi].name + '&lt;/p&gt;';
                      team_box += '&lt;/td&gt;';
                  }
                  team_box += '&lt;/tr&gt;';
              }
              team_box += '&lt;/tbody&gt;';
              team_box += '&lt;/table&gt;';
              chartdiv.html(team_box); // DRAW HTML
  
  </code></pre>
  <blockquote>
  <p>HTML</p>
  </blockquote>
  <p><code>&lt;div id=&quot;chartdiv&quot; style=&quot;width: 100%; height: 500px&quot;&gt;&lt;/div&gt;</code></p>
  <p>Thank you and advance!</p>