Question: Following is a code I implemented to create a bar chart using chart js in React app. Here it creates a bar chart with all the data in an array. But, I want to change this code only to give the output in the x-axis - destination, y-axis - no. of occurrence of this destination since it has many repeated destinations.
I searched methods to this but I couldn't get a correct solution.
Can anyone help me to do this?

```
const dataArrayY4 = [];
res.data.map(item => {
  dataArrayY4.push(item.time)
})
const dataArrayX4 = []
res.data.map(item => {
  dataArrayX4.push(item.destination)
})
this.setState({
  data4: dataArrayY4,
  labels4: dataArrayX4,
});

```

Answer: 
I ended up using [kbumsik/opus-media-recorder](https://github.com/kbumsik/opus-media-recorder), solved the issue for me. A drop-in replacement for MediaRecorder.
You need to set the `mimeType` of the `MediaRecorder`. Otherwise the browser will pick whatever format it likes best to encode the media.

```
let mediaRecorder = new MediaRecorder(stream, { mimeType: 'my/mimetype' });

```

To be sure that the browser can actually encode the format you want you could use `isTypeSupported()`.

```
console.log(MediaRecorder.isTypeSupported('my/mimetype'));

```

Chrome for example doesn't support `"audio/ogg; codecs=opus"` but supports `"audio/webm; codecs=opus"`. Firefox supports both. Safari none of them.

Once you've configured the `MediaRecorder` you can use its `mimeType` when creating the blob.

```
recording = new Blob(chunks, { 'type' : mediaRecorder.mimeType });

```