Create radar chart using Chart.js - Javascript Chart.js

Javascript examples for Chart.js:Chart Configuration

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

Description

Create radar chart using Chart.js

Demo Code

ResultView the demo in separate window 

<html>
   <head> 
      <meta name="viewport" content="width=device-width, initial-scale=1"> 
      <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.2.2/Chart.min.js"></script> 
      <script type="text/javascript" src="https://code.jquery.com/jquery-3.1.0.min.js"></script> 
      <script type="text/javascript">
    window.onload=function(){//from w  w w . java2 s  . co  m
new Chart($('#graph'), {
         type: 'radar',
         data: {
            labels: ['a','b','c'],
            datasets: [
               {
                  label: 'aaa',
                  data: [10,15,5],
                  backgroundColor: 'rgba(247, 151, 35, 0.5)',
                  borderColor: 'rgba(247, 151, 35, 1)',
                  pointBackgroundColor: 'rgba(247, 151, 35, 1)',
                  pointBorderColor: "#fff",
            radius: 5,
            pointRadius: 5,
                  borderWidth: 1
               }
            ]
         },
         options: {
            scale: {
               type: 'radialLinear',
               ticks: {
                  // hide tick labels
                  display: false,
                  min: 0,
                  max: 20,
                  stepSize: 1
               },
               gridLines: {
                  // hide lines
                  display: false
               }
            },
        legend: {
               position: 'bottom'
            }
         }
      });
    }

      </script> 
   </head> 
   <body> 
      <canvas id="graph" height="200" width="200"> 
      </canvas>  
   </body>
</html>

Related Tutorials