can i render table conditional based color changed like this using jsreports

Here is the fiddle. Can You please check it once https://jsfiddle.net/xqf2og8s/1/

I am able to render static data in charts but i am unable to render dynamic data in my handlebars.

i tried it but it's not help full for me

i want to pass data to this object

var ctx = document.getElementById('barchart').getContext('2d');
var barchart = new Chart(ctx, {
type: 'bar',

    data: {
        labels:DashboardData.barcharResponse.dates,
        datasets: [{
            label: 'Customers',
            data:DashboardData.barcharResponse.values,
            backgroundColor:'blue'
        }]
    },
    options: {

        tooltips: {
            mode: 'index',
            intersect: false
        },
        responsive: true,
        scales: {
            xAxes: [{
                stacked: true,
            }],
            yAxes: [{
                stacked: true
            }]
        },title: {
            display: true,
            text: 'Day Wise Stastics'
        },
        animation: {
            onComplete: function () {
                // set the PDF printing trigger when the animation is done
                // to have this working, the phantom-pdf menu in the left must
                // have the wait for printing trigger option selected
                window.JSREPORT_READY_TO_START = true
            }
        }
    }
});

i created handelbars file there i wrote my canvas and chart json but i didn't get data to the charts

jsreport.render({
template: {
content: fs.readFileSync('./report.handlebars').toString('utf8'),
helpers: 'function toJSON() { return 1 }',
engine: 'handlebars',
recipe: 'phantom-pdf',

                 phantom: {
                     header: '<div style="float:right">Page {#pageNum} of {#numPages}</div>',
                     footer: "Rent Dues Report",
                     format: 'A4',
                     orientation: 'portrait',
                     footerHeight: '0.7cm',
                     headerHeight: '0.7cm',
                     margin: '0.5cm',
                     waitForJS: true
                 }
             },
             data: {
                 DashboardData: data,
                 startDate: startDate,
                 endDate: endDate,
                 dummydata: dummydata

             }
         })

i got data my script but it will not append to chart object

but console.log i got data like this "[object HTMLDivElement]" and i declared div element in my html top

<div id="DashboardData"></div>

this is my code i am trying to render dynamic data into charts
<canvas id='barchart'></canvas>
<script>
function toJSON(DashboardData) {
return JSON.stringify(DashboardData);
}
console.log("zxgvgdfg"+toJSON)
var ctx = document.getElementById('barchart').getContext('2d');
var barchart = new Chart(ctx, {
type: 'bar',

    data: {
        labels:{{toJSON.barcharResponse.dates}},
        datasets: [{
            label: 'Customers',
            data: {{toJSON.barcharResponse.values}},
            backgroundColor:'blue'
        }]
    },
    options: {

        tooltips: {
            mode: 'index',
            intersect: false
        },
        responsive: true,
        scales: {
            xAxes: [{
                stacked: true,
            }],
            yAxes: [{
                stacked: true
            }]
        },title: {
            display: true,
            text: 'Day Wise Stastics'
        },
        animation: {
            onComplete: function () {
                // set the PDF printing trigger when the animation is done
                // to have this working, the phantom-pdf menu in the left must
                // have the wait for printing trigger option selected
                window.JSREPORT_READY_TO_START = true
            }
        }
    }
});

</script>

https://playground.jsreport.net/studio/workspace/SkcQLLOGl/575

how can i true "wait for printing trigger:true"

in my nodejs

jsreport.render({
        template: {
            content: fs.readFileSync('./emailtemplate.html').toString('utf8'),
            engine: 'handlebars',
            recipe: 'phantom-pdf',

            phantom: {
                header: '<div style="float:right">Page {#pageNum} of {#numPages}</div>',
                footer: "Rent Dues Report",
                format: 'A4',
                orientation: 'portrait',
                footerHeight: '0.7cm',
                headerHeight: '0.7cm',
                margin: '0.5cm',
                waitforprintingtrigger:true
            }
        },