[Chartjs]-Chart not rendering with pug/jade and nodejs

by

1👍

Inside index.js, you should not convert datax to a string but simply pass the original array. Remove JSON.stringify from the code block below. 

res.render('chart',
    { title: "chart",
      datai: JSON.stringify(datax),
      labeli: labelsx
    })

It should looks as follows.

res.render('chart',
    { title: "chart",
      datai: datax,
      labeli: labelsx
    })

UPDATE

In chart.pug you forgot to define the labels. Instead of an empty array, you should change the code as follows. 

var chart = new Chart(ctx, {
  type: 'pie',
  data: {
    labels: #{labeli}, // <- make this change

0👍

It might be to late to answer this question but I was also facing the same issue and couldn’t find any answer. The following steps did the trick.

  1. Remove JSON stringify before sending the response
res.render('chart',
  {
    title: "chart",
    datai:  datax,
    labeli: labelsx
  }
)
  1. And Data is returned in a single comma separated string. So I use the String.split function to create an array.
{
  //...
  datasets: [{
    data: ('#{datai}').split(','),
    backgroundColor: ['red', 'green', 'blue', 'pink', 'black'],
    borderColor: ['green', 'blue', 'red', 'black', 'pink'],
                            borderWidth: 1
  }],
  //...
}

Leave a comment