How can I show labels inside stacked charts (bar-line) with chartjs?

Question

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.

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.

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.

I have tried a bit of everything, plugins, functions with canva, but nothing seems to work for me, can anyone help me?

The graph I am trying to imitate is the following:

The chart I have so far:

CODE

// generate HTML for chartjs
    const _htmlChat = chartWeeklyActivity(apidata); 
    console.log('_htmlChat', _htmlChat);
// passing like object
    const dataHbs = {
       apidata,
       "canva": _htmlChat
      };
// export an generate PDF
       const pdfService = new PdfClass();
       const pdfBuffer = await pdfService.getPdf('reporte-semanal-cuatrodias', dataHbs);
        res.contentType("application/pdf");
        res.send(pdfBuffer);

TEMPLATE HBS

{{{canva}}}

FUNCTION FOR GENERATE HTML FOR CREATE CHART

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 => element.username);
    const labels = maplabels as any;
    // console.log('labels', labels);

    // DataBar
    const mapbarHorizontal = weeklyReport.map(element => element.summaryHoursTrackedWeekly);
    const barHorizontal = mapbarHorizontal as any;
    // console.log('labels', barHorizontal);

    // LineBar
    const maplineBar = weeklyReport.map(element => element.percentActivityW);
    const lineBar = maplineBar as any;

    // BarWeeklyHour USer
    const mapColbWeekly = weeklyReport.map(element => element.three_weekly_hours);
    const colbWeekly = mapColbWeekly as any;

    let result = [3, 6, 9];

    let _resLine = 'Ereignisse: ' + result + '';
    // console.log('show chart:');
    // console.log(_resLine);

    const _html = "" + "" +
        "" +
        "";

    return _html;
}

Any kind of help will be appreciated. Thank you very much in advance.

How can I show labels inside stacked charts (bar-line) with chartjs?

0 Answers