Chart.js dataset label settings - Javascript Chart.js

Javascript examples for Chart.js:Chart Data

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

Description

Chart.js dataset label settings

Demo Code

ResultView the demo in separate window 

<html>
   <head> 
      <title>ChartJS Bar Chart Example</title> 
      <meta name="viewport" content="width=device-width, initial-scale=1"> 
      <script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.1/Chart.bundle.min.js"></script> 
      <script type="text/javascript">
    window.onload=function(){/*  ww w  .j ava 2s. com*/
var oMyBarChart;
var ctx = document.getElementById("canvas").getContext("2d");
function GetSelectedChartType(sSelectedOption) {
  return sSelectedOption.options[sSelectedOption.selectedIndex].value;
}
arroLevels = ["HIGH", "MED", "LOW"];
arroLevelsCount = [30, 25, 56];
arroLevelColors = ['rgba(230,0,0,1)', 'rgba(255,255,79,1)', 'rgba(150,198,250,1)'];
sChartType = GetSelectedChartType(document.getElementById('chartSelector'));
arroChartConfig2 = {
  type: sChartType,
  data: {
    datasets: [{
      label: arroLevels[0],
      data: [arroLevelsCount[0]],
      backgroundColor: arroLevelColors[0],
      pointStyle: 'triangle',
    }, {
      label: arroLevels[1],
      data: [arroLevelsCount[1]],
      backgroundColor: arroLevelColors[1],
      pointStyle: 'triangle',
    }, {
      label: arroLevels[2],
      data: [arroLevelsCount[2]],
      backgroundColor: arroLevelColors[2],
      pointStyle: 'triangle',
    }],
    labels: arroLevels
  },
  options: {
    tooltips: {
      callbacks: {
        title: function(chart, data) {
          return data.labels[chart[0].datasetIndex];
        }
      }
    }
  }
}
oMyBarChart = new Chart(ctx, arroChartConfig2);
    }

      </script> 
   </head> 
   <body> 
      <div id="container" style="width: 75%;"> 
         <canvas id="canvas"></canvas> 
      </div> 
      <div id="chartSelectorContainer" style="width: 75%;"> 
         <select id="chartSelector"> 
            <option value="bar" selected>Bar</option> 
         </select> 
         <div>  
         </div>
      </div>
   </body>
</html>

Related Tutorials