line chart dataset label - Javascript Chart.js

Javascript examples for Chart.js:Line Chart

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

Description

line chart dataset label

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="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.1/Chart.bundle.min.js"></script> 
      <script type="text/javascript">
    window.onload=function(){/*from  w  w w .ja  v  a  2  s  .c  om*/
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,
      data: arroLevelsCount,
      backgroundColor: arroLevelColors,
      pointStyle: 'triangle',
    }],
    labels: arroLevels
  },
  options: {
    responsive: true,
    legend: {
      position: 'right',
      onClick: function() {
        return null;
      },
      labels: {
        generateLabels: function(chart) {
          return chart.data.labels.map(function(label, i) {
            return {
              text: label,
              fillStyle: chart.data.datasets[0].backgroundColor[i]
            };
          });
        }
      }
    },
    title: {
      display: true,
      text: 'My Bar Chart'
    },
    tooltips: {
      callbacks: {
        label: function(ttitem, data) {
          return ttitem.xLabel + ": " + ttitem.yLabel
        },
        labelColor: function(ttitem, data) {
          return {
            borderColor: arroLevelColors[ttitem.index],
            backgroundColor: arroLevelColors[ttitem.index]
          };
        }
      }
    }
  }
}
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="line" selected>Line</option> 
         </select> 
         <div>  
         </div>
      </div>
   </body>
</html>

Related Tutorials