Chart JS Line Graph multitooltipkey background color setting - Javascript Chart.js

Javascript examples for Chart.js:Line Chart

  1. HOME
  2. Javascript
  3. Chart.js
  4. Line Chart

Description

Chart JS Line Graph multitooltipkey background color setting

Demo Code

ResultView the demo in separate window 

<html lang="en">
   <head> 
      <title>Chart.js MultiLine Tooltip Labels</title> 
      <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> 
      <style>

body{// ww  w .j  ava  2s . co  m
   background-color: #666;
}
#multiLineChart{
   background-color: wheat;
   border-radius: 6px;
}


      </style> 
   </head> 
   <body translate="no"> 
      <div class="container"> 
         <br> 
         <div class="row"> 
            <div class="col-md-1"></div> 
            <div class="col-md-10"> 
               <!--       Chart.js Canvas Tag --> 
               <canvas id="multiLineChart"></canvas> 
            </div> 
            <div class="col-md-1"></div> 
         </div> 
      </div> 
      <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.2.1/Chart.min.js"></script> 
      <script>
      // REF
// http://stackoverflow.com/questions/40094194/chart-js-line-graph-multitooltipkey-background-color-issue
var canvas = document.getElementById("multiLineChart");
var ctx = canvas.getContext('2d');
  var data = {
    labels: ["January", "February", "March", "April", "May"],
    datasets: [{
      label: "Series A",
      data: [10, 30, 20, 40, 10],
      borderColor: "rgba(0,0,255,0.8)",
      backgroundColor:"rgba(0,0,255,0.5)"
    }, {
      label: "Series B",
      data: [25, 40, 10, 40, 30],
      borderColor: "rgba(255,0,0,0.8)",
      backgroundColor:"rgba(255,0,0,0.5)"
    }]
  };
    var options = {
      tooltips: {
       enabled: true,
       mode: 'label'
     },
      legend: {
        display: true,
      }
    };
// Chart declaration:
var multiLineChart = new Chart(ctx, {
  type: 'line',
  data: data,
  options: options
});
      //# sourceURL=pen.js
    
      </script>  
   </body>
</html>

Related Tutorials