title: How can I show labels inside stacked charts (bar-line) with chartjs?
body: <p>I am working from the backend side (express in nodejs) to generate pdf reports using puppeteer, and to generate the html I am using handlebars, in one of the reports I am adding a chart using chartjs through cdn.jsdeliver.</p>
  <p>What I do is that I generate the html and then I pass it to it with the help of handlebar as an object and that's it, so far it has worked quite well for me and I achieve what I want to do.</p>
  <p>The chart I'm making is a stacked chart, with a line chart, but I haven't been able to display the labels on top of the stacked charts and I don't really know how to do it.</p>
  <p>I have tried a bit of everything, plugins, functions with canva, but nothing seems to work for me, can anyone help me?</p>
  <p>The graph I am trying to imitate is the following:</p>
  <p><a href="https://i.stack.imgur.com/TW3XF.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/TW3XF.png" alt="enter image description here" /></a></p>
  <p>The chart I have so far:</p>
  <p><a href="https://i.stack.imgur.com/g4LYQ.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/g4LYQ.png" alt="enter image description here" /></a></p>
  <p><strong>CODE</strong></p>
  <pre><code>// generate HTML for chartjs
      const _htmlChat = chartWeeklyActivity(apidata); 
      console.log('_htmlChat', _htmlChat);
  // passing like object
      const dataHbs = {
         apidata,
         &quot;canva&quot;: _htmlChat
        };
  // export an generate PDF
         const pdfService = new PdfClass();
         const pdfBuffer = await pdfService.getPdf('reporte-semanal-cuatrodias', dataHbs);
          res.contentType(&quot;application/pdf&quot;);
          res.send(pdfBuffer);
  </code></pre>
  <p><strong>TEMPLATE HBS</strong></p>
  <pre><code>&lt;div&gt;{{{canva}}}&lt;/div&gt;
  </code></pre>
  <p>FUNCTION FOR GENERATE HTML FOR CREATE CHART</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>function square_data(chart: { dataset: { data: { [x: string]: string; }; }; dataIndex: string | number; }) {
      let c = document.createElement("canvas") as HTMLCanvasElement;
      let ctx = c.getContext("2d")!;
      ctx.fillStyle = "#FF7605";
      ctx.strokeStyle = "#FF7605";
      ctx.rect(145, 70, 15, 15);
      ctx.fill()
      ctx.fillStyle = "#fff";
      ctx.fillText(chart.dataset.data[chart.dataIndex], 147, 82, 10);
  
      ctx.stroke();
      return c
  }
  
  export function chartWeeklyActivity(weeklyReport: WeeklyReport[]) {
  
      // Labels
      const maplabels = weeklyReport.map(element =&gt; element.username);
      const labels = maplabels as any;
      // console.log('labels', labels);
  
      // DataBar
      const mapbarHorizontal = weeklyReport.map(element =&gt; element.summaryHoursTrackedWeekly);
      const barHorizontal = mapbarHorizontal as any;
      // console.log('labels', barHorizontal);
  
      // LineBar
      const maplineBar = weeklyReport.map(element =&gt; element.percentActivityW);
      const lineBar = maplineBar as any;
  
      // BarWeeklyHour USer
      const mapColbWeekly = weeklyReport.map(element =&gt; element.three_weekly_hours);
      const colbWeekly = mapColbWeekly as any;
  
      let result = [3, 6, 9];
  
      let _resLine = '&lt;h1&gt;Ereignisse: ' + result + '&lt;/h1&gt;';
      // console.log('show chart:');
      // console.log(_resLine);
  
      const _html = "&lt;script src='https://cdn.jsdelivr.net/npm/chart.js'&gt;&lt;/script&gt;" + "&lt;script src='https://cdn.jsdelivr.net/npm/chartjs-plugin-datalabels@2.0.0/dist/chartjs-plugin-datalabels.min.js'&gt;&lt;/script&gt;" +
          "&lt;canvas id='bar-chart'&gt;&lt;/canvas&gt;" +
          "&lt;script&gt;" +
          "var logChart = new Chart(document.getElementById('bar-chart'), {" +
          "type: 'horizontalBar'," +
          "data: {" +
          "labels:" + JSON.stringify(labels) + "," +
          "datasets: [" +
          "{" +
          "type: 'line'," +
          "label: '% ACTIVITY'," +
          "data:" + JSON.stringify(lineBar) + "," +
          "fill: false," +
          "borderColor: '#FF7605'," +
          "borderWidth: 3" +
          "}," +
          "{" +
          "type: 'bar'," +
          "label: 'WEEKLY SUMMARY OF HOURS'," +
          "data:" + JSON.stringify(barHorizontal) + "," +
          "backgroundColor: '#222A35'" +
          "}," +
          "{" +
          "type: 'bar'," +
          "label: 'HOURS'," +
          "data:" + JSON.stringify(colbWeekly) + "," +
          "backgroundColor: '#008582'" +
          "}," +
          "]" +
          "}," +
          "options: {" +
          "plugins: {" +
          "datalabels: {" +
          "anchor: 'start'," +
          "align: '-45'," +
          "clamp: true," +
          "color: '#FF7605', " +
          "formatter:" + "(value, ctx) =&gt;" + "{" +
          "return;"+
          "}" +
          "}" +
          "}," +
          "elements: {" +
          "'point':" + "{" + "'pointStyle':" + square_data + "}," +
          "}," +
          "scales: {" +
          "xAxis: {" +
          "stacked: true," +
          "}," +
          "yAxis: {" +
          "stacked: true," +
          "ticks: {" +
          "beginAtZero: true" +
          "}" +
          "}" +
          "}," +
          "title: {" +
          "display: true," +
          "text: 'Rendimiento Semanal'" +
          "}," +
          "legend: {" +
          "position: 'right'" +
          "}" +
          "}" +
          "});" +
          "&lt;/script&gt;";
  
      return _html;
  }</code></pre>
  </div>
  </div>
  </p>
  <p>Any kind of help will be appreciated. Thank you very much in advance.</p>