Chart tooltip wont work in row


Topic: Chart tooltip wont work in row

Henrik Engdahl free asked 5 years ago

My pie charts tool tip wont work when its in a <row>. When i take the chart canvas out of the row. then it works. But I need it to be in a row with other elements.. html: <div class="row" id="chartrow"> <div class="col-5 container-fluid"> <canvas id="pieChart" height="250"></canvas> </div> </div>   js: var ctxP = document.getElementById("pieChart").getContext('2d'); var myPieChart = new Chart(ctxP, { type: 'pie', data: { labels: ["Värde 1", "Värde 2", "Värde 3", "Värde 4", "Värde 5", "Värde 6", "Värde 7"], datasets: [ { data: [ 1, 5,10, 20,50,70,90], backgroundColor: ["#2196F3", "#00BCD4", "#FFC107", "#FF9800", "#f44336", "#607D8B", "#673AB7"], hoverBackgroundColor: ["#5AD3D1", "#FFC870", "#A8B3C5", "#616774", "#2196F3", "#FFEB3B", "#4CAF50"] } ] }, options: { responsive: true } }); })    

Mirosław Stasiak free answered 5 years ago

Hi Henrik, You had a poorly written page layout and there were issues with quotes. Try this:
<div class=" container-fluid">
  <div class="row" id="chartrow">
    <div class="col-5 mx-auto">
      <canvas id="pieChart" height="250"></canvas>
    </div>
  </div>
</div>


var ctxP = document.getElementById("pieChart").getContext('2d');
var myPieChart = new Chart(ctxP, {
  type: 'pie',
  data: {
    labels: ["Värde 1", "Värde 2", "Värde 3", "Värde 4", "Värde 5", "Värde 6", "Värde 7"],
    datasets: [{
      data: [ 1, 5,10, 20,50,70,90],
      backgroundColor: ["#2196F3", "#00BCD4", "#FFC107", "#FF9800", "#f44336", "#607D8B", "#673AB7"],
      hoverBackgroundColor: ["#5AD3D1", "#FFC870", "#A8B3C5", "#616774", "#2196F3", "#FFEB3B", "#4CAF50"]
    }]
  },
  options: {
    responsive: true
  }
});

Henrik Engdahl free commented 5 years ago

I tried you solution but it did not work.. When i delete the row-class, it works again. Im a bit stuck..

Mirosław Stasiak free commented 5 years ago

Send me your code here or on mail m.stasiak@mdbootstrap.com

Henrik Engdahl free commented 5 years ago

its sent!

Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Resolved

Specification of the issue
  • User: Free
  • Premium support: No
  • Technology: MDB jQuery
  • MDB Version: -
  • Device: -
  • Browser: -
  • OS: -
  • Provided sample code: No
  • Provided link: No
Tags