Chart.js tooltip not show

Question

Chart work fine butt can't see tooltips… I cant find where problem is and what I missing…

<div style="width: 1000px; height: 600">
<canvas id="myChart" ></canvas>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.4.0/Chart.min.js"></script>
<script>
    var ctx = document.getElementById("myChart").getContext('2d');
    var myNewChart = new Chart(ctx, {
        type: 'line',
        data: {
            labels: ["24.5.2018. 15:23:48", "24.5.2018. 16:00:00", "24.5.2018. 17:00:00", ],
            datasets: [{
                label: '# Temperature',
                fill: false,
                data: [29, 25, 24,  ],
                backgroundColor: [
                               ],
                borderColor: [
                               ],
                borderWidth: 1
            }, {
                label: '# Humidity',
                data: [54, 62, 64,  ],
                borderColor: [
          ],
                borderWidth: 1,
                fill: false,
                type: 'line'
            }
        ]
        },
    options: {
    legend: {
      display: true,
      position: 'top',
      labels: {
        boxWidth: 80,
        fontColor: 'rgb(60, 180, 100)'
      }
    },
    tooltips: {
      cornerRadius: 4,
      caretSize: 4,
      xPadding: 16,
      yPadding: 10,
      backgroundColor: 'rgba(0, 150, 100, 0.9)',
      titleFontStyle: 'normal',
      titleMarginBottom: 15
    }
  }
    });
</script>

Helper seed that I need add more text for posting this but dont konw how simple question make longer…. text text Helper seed that I need add more text for posting this but dont konw how simple question make longer….

Answer 1

Try this one

<div style="width: 1000px; height: 600">
  <canvas id="myChart"></canvas>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.4.0/Chart.min.js"></script>
<script>
  var ctx = document.getElementById("myChart").getContext('2d');
  var myNewChart = new Chart(ctx, {
    type: 'line',
    data: {
      labels: ["24.5.2018. 15:23:48", "24.5.2018. 16:00:00", "24.5.2018. 17:00:00", ],
      datasets: [{
        label: '# Temperature',
        fill: false,
        data: [29, 25, 24, ],
        borderWidth: 1
      }, {
        label: '# Humidity',
        data: [54, 62, 64, ],
        borderWidth: 1,
        fill: false,
        type: 'line'
      }]
    },
    options: {
      legend: {
        display: true,
        position: 'top',
        labels: {
          boxWidth: 80,
          fontColor: 'rgb(60, 180, 100)'
        }
      },
      tooltips: {
        cornerRadius: 4,
        caretSize: 4,
        xPadding: 16,
        yPadding: 10,
        backgroundColor: 'rgba(0, 150, 100, 0.9)',
        titleFontStyle: 'normal',
        titleMarginBottom: 15
      }
    }
  });

</script>

Just remove backgroundColor: [] and borderColor: [] from both datasets