Chart.js radar pointLabel options - Javascript Chart.js

Javascript examples for Chart.js:Chart Configuration

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

Description

Chart.js radar pointLabel options

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/jquery/2.1.3/jquery.min.js"></script> 
      <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.1.3/Chart.bundle.js"></script> 
      <script type="text/javascript">
    window.onload=function(){//  w w w  .j  ava 2 s.co m
var dayData = {
        labels: ["Test","Test asd","asd"],
        datasets:[{
            label: 'Total Votes',
            data:4,
            backgroundColor: 'rgba(102, 153, 255,0.2)',
            borderColor: 'rgba(102, 153, 255,1)'
        },{
            label: 'Yes Votes',
            data:5,
            backgroundColor: 'rgba(0,204,102,0.2)',
            borderColor: 'rgba(0,204,102,1)'
        },{
            label: 'No Votes',
            data: 6,
            backgroundColor: 'rgba(255, 102, 102,0.2)',
            borderColor: 'rgba(255, 102, 102,1)'
        }]
    };
var radarOptions = {
    title: {
        display: true,
        text: 'Custom Chart Title'
    },
    scale: {
        angleLines:{
            lineWidth: 5
        },
        pointLabels:{
            fontSize: 20,
            fontColor: 'ff0000'
        },
    }
};
var dayPlotEl = document.getElementById("myChart2").getContext("2d");
var dayChart = new Chart(dayPlotEl, {type:"radar", data: dayData, options: radarOptions});
    }

      </script> 
   </head> 
   <body> 
      <div id="canvas-holder" style="width:75%"> 
         <canvas id="myChart2"></canvas> 
      </div>  
   </body>
</html>

Related Tutorials