Generate Chart With 2 Datasets Charts.js

Question

I can get my chart to display with 1 dataset no problem, but adding in the second one to the syntax below gives me an error of

Uncaught Syntax Error: Unexpected Token }

This is my syntax - what is causing the issue?

var ctx = document.getElementById('canvas').getContext('2d');
var chart = new Chart(ctx, {
        datasets: [{
                type: 'bar',
                labels: labelsarr,
                label: 'Red Team',
                backgroundColor: 'rgba(0, 129, 214, 0.8)',
                data: [values]
            }, {
                type: 'line', 
                label: 'Green Team',
                backgroundColor: 'rgba(0,129, 218, 0.8)',
                data: [values1]
            }, {
            options: {
                tooltips: {
                    callbacks: {
                        label: function (t, d) {
                            var xLabel = d.datasets[t.datasetIndex].label;
                            var yLabel = t.yLabel >= 1000 ? '$' + t.yLabel.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",") : '$' + t.yLabel;
                            return xLabel + ': ' + yLabel;
                        }
                    }
                },
                legend: {
                    display: false,
                    position: 'top',
                },
                scales: {
                    yAxes: [{
                            ticks: {
                                beginAtZero: true,
                                callback: function (value, index, values) {
                                    if (parseInt(value) >= 1000) {
                                        return '$' + value.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
                                    } else { return '$' + value; }
                                }
                            }
                        }]
                }
            },
            plugins: [{
                    beforeDraw: function (chart) {
                        var labels = chart.data.labels;
                    }
                }]
            }
        }]  
    );

ever.wakeful · Accepted Answer · 2017-07-27T02:40:46.590

1

The second last line of your code }] is backwards. It should be ]}

reconfigured structure:

var ctx = document.getElementById('canvas').getContext('2d');
var chart = new Chart(ctx, {
  type: 'bar',
  data: {
    datasets: [
      {
        label: 'Red Team',
        data: values,
        backgroundColor: 'rgba(0, 129, 214, 0.8)',
      },
      {
        label: 'Green Team',
        data: values1,
        type: 'line',
        backgroundColor: 'rgba(0,129, 218, 0.8)',
      }
    ],
    labels: labelsarr
  },
  options: {
    callbacks: {
      label: function (t, d) {
        var xLabel = d.datasets[t.datasetIndex].label;
        var yLabel = t.yLabel >= 1000 ? '$' + t.yLabel.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",") : '$' + t.yLabel;
        return xLabel + ': ' + yLabel;
      }
    },
    legend: {
      display: false,
      position: 'top'
    },
    scales: {
      yAxes: [{
        ticks: {
          beginAtZero: true,
          callback: function (value, index, values) {
            if (parseInt(value) >= 1000) {
              return '$' + value.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
            } else { return '$' + value; }
          }
        }
      }]
    }
  },
  plugins: [{
    beforeDraw: function (chart) {
      var labels = chart.data.labels;
    }
  }]
});

edited Jul 27 '17 at 02:40

answered Jul 27 '17 at 01:15

ever.wakeful

422
3
10

This removed the error - but no chart is ever generated on the page. If I alert to show the length of values & values1 they each show 24. Do you see another issue? – IcyPopTarts Jul 27 '17 at 02:09
are values and values1 an array? – ever.wakeful Jul 27 '17 at 02:29
yes - they are both declared like such var values1 = []; var values = []; – IcyPopTarts Jul 27 '17 at 02:30
ok so im just basing this of the docs but i think you just need to tweak your structure - see edit to answer – ever.wakeful Jul 27 '17 at 02:39
that will generate the bar chart but not the line chart. – IcyPopTarts Jul 27 '17 at 02:43
which chart.js version are you using? – ever.wakeful Jul 27 '17 at 02:51
2.6? https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.6.0/Chart.min.js – IcyPopTarts Jul 27 '17 at 02:52
hmm, according to this - that should have worked: http://www.chartjs.org/docs/latest/charts/mixed.html – ever.wakeful Jul 27 '17 at 02:54
not sure then. I do not know why the line chart will not appear. – IcyPopTarts Jul 27 '17 at 03:01

Generate Chart With 2 Datasets Charts.js

1 Answers1