chart.jsのグラフ崩れ

前提・実現したいこと

chart.jsにて表示されるグラフにマウスオーバーするとグラフが崩れるのを解決

発生している問題・エラーメッセージ

グラフにマウスオーバーするとグラフが複数個あるように重なって表示されます

該当のソースコード

(rails.jQuery)
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.js"></script>

 <div class="content">
  var ctx = document.getElementById("myYoutubeChart");
  var myChart = new Chart(ctx, {
    type: 'pie',
    data: {
      labels: ["13才-17才", "18才-24才", "25才-34才", "35才-44才", "45才-54才", "55才-64才", "65+"], //データ項目のラベル
      datasets: [{
          backgroundColor: [
             "#00FF3B",
              "#FFFF33",
              "#00ECFF",
              "#5507FF",
              "#FF0461",
              "#FF88FF",
              "#AAAAAA"
          ],
          data: [gon.profile.youtube_age1, gon.profile.youtube_age2, gon.profile.youtube_age3, gon.profile.youtube_age4,
          gon.profile.youtube_age5,gon.profile.youtube_age6,gon.profile.youtube_age7] //グラフのデータ
      }]
    },
    options: {
      title: {
        display: true,
        //グラフタイトル
        text: ''
        
      }
    }
  });
</script>

【HTML】
<script>
  new Chart(document.getElementById('youtubegender'), {
  type: 'horizontalBar',
  data: {
    labels: [""],
    datasets: [
      { label: "男性", data: [gon.profile.youtube_man,], backgroundColor: "rgba(19, 111, 255, 1)" },
      { label: "女性", data: [gon.profile.youtube_woman], backgroundColor: "rgba(255, 0, 51, 1)" }
    ]
  },
  options: {
    scales: {
      xAxes: [{stacked: true}],
      yAxes: [{stacked: true}]
    }
  }
  });
</script>

【HTML】
 <canvas id="myYoutubeChart" width="100" height="30"></canvas>
            <%= render "shared/chart" %>
          </div>


また、タブで切り替えも行っています
【JQuery】
$(function() {
  let tabs = $(".tab"); // tabのクラスを全て取得し、変数tabsに配列で定義
  $(".tab").on("click", function() { // tabをクリックしたらイベント発火
    $(".active").removeClass("active"); // activeクラスを消す
    $(this).addClass("active"); // クリックした箇所にactiveクラスを追加
    const index = tabs.index(this); // クリックした箇所がタブの何番目か判定し、定数indexとして定義
    $(".content").removeClass("show").eq(index).addClass("show"); // showクラスを消して、contentクラスのindex番目にshowクラスを追加
  })
})

試したこと

canvas内のidの後にstyleを使用して高さと幅を指定しても変化無し

firegrape

2020/10/14 11:10

マウスオーバーしたときの部分のソースはのっていますか？

sayaka1001

2020/10/14 12:01

お返事ありがとうございます。 htmlで記載していてもマウスオーバした時は下記になります。横棒グラフ <canvas id="youtubegender" width="2880" height="2504" class="chartjs-render-monitor" style="display: block; height: 1252px; width: 1440px;"></canvas> 円グラフ <canvas id="myYoutubeChart" width="2880" height="1584" class="chartjs-render-monitor" style="display: block; height: 792px; width: 1440px;"></canvas> になります。また、render先の記載は投稿させていただいた記載になります。