Chart tooltip wont work in row

Topic: Chart tooltip wont work in row

Henrik Engdahl free asked 6 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 } }); })

Add comment

Mirosław Stasiak free answered 6 years ago

0 0 Best answer

Please insert min. 20 characters.

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 6 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 6 years ago

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

Henrik Engdahl free commented 6 years ago

its sent!

Add comment

Write

Create snippet

FREE CONSULTATION

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

Status

Resolved

Specification of the issue

ForumUser: Free
Premium support: No
Technology: MDB jQuery
MDB Version: -
Device: -
Browser: -
OS: -
Provided sample code: No
Provided link: No

Henrik Engdahl

15Support score
5Questions 1Answers 0Snippets