title: bar chart with multiple bars and 1 label
body: <p><a href="https://i.stack.imgur.com/UbdCx.jpg" rel="nofollow noreferrer">Sample grouped stacked bar chart</a></p>
  
  <p>Above is a sample chart.  The colored parts of the bars are tickets opened.  The diamond part of the bars are tickets closed.  I only want 1 label for tickets closed.</p>
  
  <pre><code>var ctxMonthly = document.getElementById('monthlyTkts').getContext('2d');
              var chartMonthly = new Chart(ctxMonthly, {
                  // The type of chart we want to create
                  type: "bar",
                      // The data for our dataset
                  data: {
                      labels: ["Week 1", "Week 2", "Week 3", "Week 4"],
                      datasets: [
                      {
  //                      label: "Critical-Opened",
                          stack: "Critical",
                          backgroundColor: ["red", "red", "red", "red"],
                          borderColor: ["black", "black", "black", "black"],
                          data: 
                              &lt;?php echo json_encode($monthlyOpenedData[0]); ?&gt;
                      },
                      {
  //                      label: "Critical-Closed",
                          stack: "Critical",
                          backgroundColor: ["purple", "purple", "purple", "purple"],
                          borderColor: ["black", "black", "black", "black"],
                          data: 
                              &lt;?php echo json_encode($monthlyClosedData[0]); ?&gt;
                      },
                      {
  //                      label: "Urgent-Opened",
                          stack: "Urgent",
                          backgroundColor: ["orange", "orange", "orange", "orange"],
                          borderColor: ["black", "black", "black", "black"],
                          data: 
                              &lt;?php echo json_encode($monthlyOpenedData[1]); ?&gt;
                      },
                      {
  //                      label: "Urgent-Closed",
                          stack: "Urgent",
                          backgroundColor: ["purple", "purple", "purple", "purple"],
                          borderColor: ["black", "black", "black", "black"],
                          data: 
                              &lt;?php echo json_encode($monthlyClosedData[1]); ?&gt;
                      },
                      {
  //                      label: "Elevated-Opened",
                          stack: "Elevated",
                          backgroundColor: ["green", "green", "green", "green"],
                          borderColor: ["black", "black", "black", "black"],
                          data: 
                              &lt;?php echo json_encode($monthlyOpenedData[2]); ?&gt;
                      },
                      {
  //                      label: "Elevated-Closed",
                          stack: "Elevated",
                          backgroundColor: ["purple", "purple", "purple", "purple"],
                          borderColor: ["black", "black", "black", "black"],
                          data: 
                              &lt;?php echo json_encode($monthlyClosedData[2]); ?&gt;
                      },
                      {
  //                      label: "General-Opened",
                          stack: "General",
                          backgroundColor: ["blue", "blue", "blue", "blue"],
                          borderColor: ["black", "black", "black", "black"],
                          data: 
                              &lt;?php echo json_encode($monthlyOpenedData[3]); ?&gt;
                      },
                      {
  //                      label: "General-Closed",
                          stack: "General",
                          backgroundColor: ["purple", "purple", "purple", "purple"],
                          borderColor: ["black", "black", "black", "black"],
                          data: 
                              &lt;?php echo json_encode($monthlyClosedData[3]); ?&gt;
                      }]
                  },
                      // Configuration options go here
                  options: {
                      responsive: true,
                      legendCallback: function(chartMonthly) {
                          var text = [];
                          text.push('&lt;ul class="list-inline"&gt;');
                          var bgColorsMonthly = ["red", "orange", "green", "blue", "purple"];
                          var chartLabelsMonthly = ["Critical", "Urgent", "Elevated", "General", "Closed"];
  
                          for(var i = 0;i &lt; 5; i++) {
                              text.push('&lt;li class="list-inline-item btn text-white" style=" background: ' + bgColorsMonthly[i] + ' "&gt;');
                              text.push(chartLabelsMonthly[i]);
                              text.push('&lt;/li&gt;');
                          }
  
                          text.push('&lt;/ul&gt;');
                          return text.join("");
                      },
                      scales: {
                          xAxes: [{
                              stacked: true,
                          }],
                          yAxes: [{
                              stacked: true,
                              ticks : {
                                  min : 0
                              }
                          }]
                      },
                      legend: {
                          display: false,
                          labels: {
                              boxWidth: 15,
      //                      usePointStyle: true,
                          }
                      }
                  }
              });
              document.getElementById('monthlyLabels').innerHTML = chartMonthly.generateLegend();
  </code></pre>
  
  <p>OK, so I figured out that I needed to use generateLegend to achieve what I wanted with the labels.  Is there anyway for format the legend to look like the auto generated legend and still achieve what I want?</p>