mqttデータをトピックごとにグラフ化したい

やりたいこと
① 複数の端末からmqttデータをラズパイに送信
② ブラウザ上でTOPICごとにリアルタイムなグラフを描画 (同軸上で複数のグラフを描画したい)

できていること
・TOPICごとにmqttデータを送信すること
・ラズパイ(Broker)がmqttデータを受信すること
・TOPICに関係なく送信されてきたmqttデータをグラフに描画すること

できないこと
・TOPICの参照がされず一つのグラフとして表示されてしまう。

質問ばかりで恐縮ですが何卒ご助力お願い申し上げます。

以下に使用しているコードを載せさせていただきます。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>リアルタイムなグラフ描画</title>
    <script src="moment-with-locales.min.js"></script>
    <script src="Chart.min.js"></script>
    <script src="chartjs-plugin-streaming.min.js"></script>
    <script src="mqtt.min.js"></script>
  </head>
  <body>
    <canvas id="myChart"></canvas>
    <script>
      
      const TOPIC1 = "home/1";
      const TOPIC2 = "home/2";

      var client = mqtt.connect('ws:// ラズパイのURL:ポート番号 ');      

      client.on("connect", function () {
        client.subscribe("presence", function (err) {
          if (!err) {
            console.log("接続");
            client.subscribe(TOPIC1);
          } else {
            console.log("接続エラー");
          }
        });
        
        client.subscribe("presence", function (err) {
          if (!err) {
            console.log("接続");
            client.subscribe(TOPIC2);
          } else {
            console.log("接続エラー");
          }
        });
      });

      const ctx = document.getElementById("myChart").getContext("2d");

      let chart = new Chart(ctx, {
        type: "line",
        data: {
          datasets: [
            {
              data: [],
            },
            {
              data: [],
            },
          ],
        },
        
        type: "line",
        data: {
          datasets: [
            {
              data: [],
            },
            {
              data: [],
            },
          ],
        },
        
        options: {
          scales: {
            xAxes: [
              {
                type: "realtime",
                realtime: {
                  duration: 300000,
                   delay: 5000,
                },
              },
            ],
          },
        },
      });

      client.on("message", function (topic, message) {
        console.log(message.toString());

        chart.data.datasets[0].data.push({
          x: Date.now(),
          y: message.toString(),
        });
        

        chart.update({
          preservation: true,
        });
      });
    </script>
  </body>
</html>