In Visual studio code, When I am using chart.js in my app, prettier always put a ma at the end of the last data of the object 'label'. I think, it's create a bug which unable to show my chart on my browser. it show blank. Code is given bellow.

let massPopChart2 = new Chart(myChart2, {
  type: "bar", // bar, horizontalBar, pie, line, doughnut, radar, polarArea
  data: {
    labels: [
      "1st Day",
      "2nd Day",
      "3rd Day",
      "4th Day",
      "5th Day",
      "6th Day",
      "7th Day",
    ],
  },
});

In Visual studio code, When I am using chart.js in my app, prettier always put a ma at the end of the last data of the object 'label'. I think, it's create a bug which unable to show my chart on my browser. it show blank. Code is given bellow.

let massPopChart2 = new Chart(myChart2, {
  type: "bar", // bar, horizontalBar, pie, line, doughnut, radar, polarArea
  data: {
    labels: [
      "1st Day",
      "2nd Day",
      "3rd Day",
      "4th Day",
      "5th Day",
      "6th Day",
      "7th Day",
    ],
  },
});

• javascript
• html
• visual-studio-code
• chart.js
• prettier

• 2 You can change it by setting 'trailingComma': 'none' in your prettier config. – nsevens Commented Jun 1, 2021 at 17:07

3 Answers 3

JavaScript has allowed trailing mas in array literals since the beginning, and later added them to object literals (ECMAScript 5) and most recently (ECMAScript 2017) to function parameters.

This is a relatively new change in syntax, but the basic idea is that by putting a ma on each line allows for:

1. Easier to add an item or re-order items. Before you always had to check the trailing ma and make sure it was present or removed depending on location.
2. Removes the need to have one line item be special because it lacks the ,.
3. Allows for cleaner Git diffs.

You can read up on the full documentation if you like - it goes into further detail: https://developer.mozilla/en-US/docs/Web/JavaScript/Reference/Trailing_mas

As far as the issue with your chart not displaying, unless you are using a very old browser, a trailing ma should not cause an error/information to not display.

You need to update the configuration of prettier extension.

There are two ways. Below one is mostly used.

1. Create a .prettierrc file at the root of your project and specifying the below configuration.

   { "trailingComma": "es5" }

2. In order to honor the configuration make sure to enable the below setting in vs code configuration.

   "prettier.requireConfig": true

Prettier adds those mas at the end just because if you wanna add another data after that you don't need to type a ma. it does the same for semicolons(;).

you got the error because you haven't provided datasets.

data takes an object which contains labels & datasets values.

{/* <canvas id="myChart" width="400" height="400"></canvas> */}

// var ctx = document.getElementById('myChart');
var myChart = new Chart(ctx, {
  type: 'bar',
  data: {
    labels: ['1','2'],
    datasets: [
      {
        label: '1st',
        data: '120',
        borderColor: Utils.CHART_COLORS.red,
        backgroundColor: Utils.transparentize(Utils.CHART_COLORS.red, 0.5),
      },
      {
        label: '2',
        data: '240',
        borderColor: Utils.CHART_COLORS.red,
        backgroundColor: Utils.transparentize(Utils.CHART_COLORS.blue, 0.5),
      }
    ]
  },
//   options: {
//     indexAxis: 'y',
//     elements: {
//       bar: {
//         borderWidth: 2,
//       }
//     },
//     responsive: true,
//     plugins: {
//       legend: {
//         position: 'right',
//       },
//       title: {
//         display: true,
//         text: 'Chart.js Horizontal Bar Chart'
//       }
//     }
//   },
// };

you can know more about it on official docs https://www.chartjs/docs/latest/charts/bar.html