How to set data values as labels with a Radar Chart - Javascript Chart.js

Javascript examples for Chart.js:Chart Label

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

Description

How to set data values as labels with a Radar Chart

Demo Code

ResultView the demo in separate window 

<html lang="en">
   <head> 
      <title>  Gabriel Rosales</title> 
   </head> 
   <body translate="no"> 
      <canvas id="radar-chart" width="800" height="600"></canvas> 
      <script src="https://cdnjs.com/libraries/Chart.js"></script> 
      <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.3/Chart.min.js"></script> 
      <script>
      var data = [8.77,55.61,21.69,6.62,6.82];
var dataLabel = 3.42;//from www . j a  v a2  s.c  o  m
new Chart(document.getElementById("radar-chart"), {
    type: 'radar',
    data: {
      labels: [`South America \n ${dataLabel}`, "Asia", "Europe", "Latin America", "North America"],
      datasets: [
        {
          label: "1950",
          fill: true,
          backgroundColor: "rgba(179,181,198,0.2)",
          borderColor: "rgba(179,181,198,1)",
          pointBorderColor: "#fff",
          pointBackgroundColor: "rgba(179,181,198,1)",
          data: data
        }, {
          label: "2050",
          fill: true,
          backgroundColor: "rgba(255,99,132,0.2)",
          borderColor: "rgba(255,99,132,1)",
          pointBorderColor: "#fff",
          pointBackgroundColor: "rgba(255,99,132,1)",
          pointBorderColor: "#fff",
          data: [25.48,54.16,7.61,8.06,4.45]
        }
      ]
    },
    options: {
      title: {
        display: true,
        text: 'Distribution in % of world population'
      }
    }
});
      //# sourceURL=pen.js
    
      </script>  
   </body>
</html>

Related Tutorials