Generate Line Chart multi datasets

[robertowiest]

Hi, I'm trying to generate a line chart using ChartJS. However, I am not able to use multidatasets dynamically. This data is randomly generated every day. So in the same day I can have two different types of data for the same insect. So, from this JSON data format I need to generate a line chart where each insect has its information on the Y axis.

I may be grouping the data incorrectly. But we realized that there is a need to have multi datasets.

datacollection: {
        labels: this.monitoring_datas.map((e) => e.record_date),
        datasets: [
          {
            label: this.monitoring_datas.map((e) => e.amount),
            data: this.monitoring_datas.map((e) => e.amount),
            fill: false,
            backgroundColor: "rgb(4, 209, 158)",
            borderColor: "rgba(4, 209, 158, 0.2)",
          }
        ],
      },
      options: {
        responsive: true,
        plugins: {
          title: {
            display: true,
            text: "Temperatura Diária",
          },
        },
        scales: {
          yAxes: [
            {
              display: true,
              scaleLabel: {
                display: true,
                labelString: "Temperatura (˚C)",
              },
              suggestedMin: -10,
              suggestedMax: 50,
            },
          ],
          xAxes: [
            {
              display: true,
              type: "time",
              scaleLabel: {
                display: true,
                labelString: "Data da observação",
              },
              time: {
                unit: "day",
                displayFormats: {
                  day: "DD/MM/yy",
                },
              },
            },
          ],
        },
        legend: {
          display: true,
        }
      },

[
        {
          "record_date": "2021-10-01T03:00:00.000Z",
          "amount": 3,
          "pest_scientific_name": "Myochrous armatus (Baly, 1865) "
        },
        {
          "record_date": "2021-10-01T03:00:00.000Z",
          "amount": 2,
          "pest_scientific_name": "Elasmopalpus lignosellus (Zeller, 1848) "
        },
        {
          "record_date": "2021-10-05T03:00:00.000Z",
          "amount": 6,
          "pest_scientific_name": "Myochrous armatus (Baly, 1865) "
        },
        {
          "record_date": "2021-10-13T03:00:00.000Z",
          "amount": 6,
          "pest_scientific_name": "Elasmopalpus lignosellus (Zeller, 1848) "
        },
        {
          "record_date": "2021-10-26T09:00:00.000Z",
          "amount": 1,
          "pest_scientific_name": "Phyllophaga cuyabana (Moser, 1918) ",
        }
      ]

[etimberg]

Are you getting an error from this? I think part of the problem might be label: this.monitoring_datas.map((e) => e.amount),. The label field of a dataset should be a single string that represents the title of the dataset. I think things might be breaking when an array is provided

[LeeLenaleee]

While it doesn't render correct because no space is reserved you can pass an array to the label field, it renders multiline.
https://jsfiddle.net/Leelenaleee/d1htu9La/