Chartjs-How to add multiple data in chart js dynamically from JSON

for passing the data dynamically as you get from the data source, you need to maintain three arrays each for each bar.

that is one for defendTarget, target and totalDisplacement..

As you get the object from the data source,
You need to segregate the number of object. For that you can use the following line:

this.totalRecords=Object.keys(this.data)

Then suppose you need to generate the array for defendTarget. You need to use the following logic:

this.totalRecords.forEach((record)=>{
    this.defendTargetData.push(record.defendTarget)
     })

edit:
For getting the number of bars you want you need to use the following code:

this.totalBars = Object.keys(this.totalRecords[0])

And now you can update the code for dataset as:

 this.totalBars.forEach((bar)={
  currentDataSet = {label:bar,backgroundColor: 
     "#fd3612",data:[]};
  this.totalRecords.forEach((record)=>{
        currentDataSet.data.push(record.bar)
       })
   this.dataSet.push(currentDataSet)
  })

I hope this would fit into your requirement.