Chart JS stacked labels instead of making them horizontal

Question

Passing array object to labels of ChartJS. I am passing an array from PHP to ChartJS. The values are supposed to form the horizontal labels of the chart but it only displayed stacked on each other. How do I resolve it?

var answers = <?php echo json_encode($answerArray); ?>;
    var countList = <?php echo json_encode($countList); ?>;
    console.log(answers);

    var areaChartData = {
      labels  : [answers],
      datasets: [
        {
          label               : 'Digital Goods',
          backgroundColor     : 'rgba(60,141,188,0.9)',
          borderColor         : 'rgba(60,141,188,0.8)',
          pointRadius         : false,
          pointColor          : '#3b8bba',
          pointStrokeColor    : 'rgba(60,141,188,1)',
          pointHighlightFill  : '#fff',
          pointHighlightStroke: 'rgba(60,141,188,1)',
          data                : [50, 60, 70, 80 , 90]
        },
        {
          label               : 'Electronics',
          backgroundColor     : 'rgba(210, 214, 222, 1)',
          borderColor         : 'rgba(210, 214, 222, 1)',
          pointRadius         : false,
          pointColor          : 'rgba(210, 214, 222, 1)',
          pointStrokeColor    : '#c1c7d1',
          pointHighlightFill  : '#fff',
          pointHighlightStroke: 'rgba(220,220,220,1)',
          data                : [50, 60, 70, 80 , 90]
        },
                {
          label               : 'Welath',
          backgroundColor     : 'rgba(210, 214, 222, 1)',
          borderColor         : 'rgba(210, 214, 222, 1)',
          pointRadius         :  false,
          pointColor          : 'rgba(210, 214, 222, 1)',
          pointStrokeColor    : '#c1c7d1',
          pointHighlightFill  : '#fff',
          pointHighlightStroke: 'rgba(220,220,220,1)',
          data                : [50, 60, 70, 80 , 90]
        }
      ]
    }

This is the result I got on the chart:

This is how I expect it looks like:

Answer 1

This behaviour comes from that your labels array contains an array containing an array with all labels like this: [["label1", "label2", "label3"]] this is meant for multiline labels. You need to make sure your labels are in a single array like this: ["label1", "label2", "label3"] then it will render correctly.

A simple fix for this is replace labels: [answers], by labels: answers,