Chartjs to change font styles for "labels" array - Javascript Chart.js

Javascript examples for Chart.js:Chart Configuration

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

Description

Chartjs to change font styles for "labels" array

Demo Code

ResultView the demo in separate window 

<html>
   <head> 
      <title>https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.3.0/Chart.bundle.min.js</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.5.0/Chart.bundle.min.js"></script> 
      <script type="text/javascript">
    window.onload=function(){/* ww w  .ja va 2  s. com*/
var ctx = document.getElementById("myChart");
    var data = {
    labels: ["HTML", "CSS", "JavaScript", "jQuery", "Bootstrap", "Gulp", "PHP", 'SQL', 'Git'],
    datasets: [
        {
            defaultFontColor: 'red',
            backgroundColor: "rgba(0,255,255,.4)",
            borderColor: "rgba(0,255,255,.4)",
            pointBackgroundColor: "red",
            pointBorderColor: "#fff",
            lineTension: 0,
            pointHoverBackgroundColor: "#fff",
            pointHoverBorderColor: "rgba(179,181,198,1)",
            data: [95, 99, 60, 91, 36, 95, 40, 95, 95]
            }
        ]
    };
    var myRadarChart = new Chart(ctx, {
      type: 'radar',
      data: data,
      options: {
        responsive: true,
        scale: {
            reverse: false,
                   pointLabels :{
               fontStyle: "bold",
            },
            ticks: {
                // defaultFontSize: true
            }
        }
      }
    });
    }

      </script> 
   </head> 
   <body> 
      <canvas id="myChart" width="400" height="400"></canvas>  
   </body>
</html>

Related Tutorials