Draw a Polar Area chart with Chart.JS - Javascript Chart.js

Javascript examples for Chart.js:Polar Chart

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

Description

Draw a Polar Area chart with Chart.JS

Demo Code

ResultView the demo in separate window 

<html>
   <head> 
      <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/1.0.2/Chart.js"></script> 
   </head> 
   <body> 
      <canvas id="myChart" width="400" height="400"></canvas> 
      <script>
      // Get the context of the canvas element we want to select
var data = [// w  w w  . j  a  v  a  2s . c  om
    {
        value: 300,
        color:"#F7464A",
        highlight: "#FF5A5E",
        label: "Red"
    },
    {
        value: 50,
        color: "#46BFBD",
        highlight: "#5AD3D1",
        label: "Green"
    },
    {
        value: 100,
        color: "#FDB45C",
        highlight: "#FFC870",
        label: "Yellow"
    },
    {
        value: 40,
        color: "#949FB1",
        highlight: "#A8B3C5",
        label: "Grey"
    },
    {
        value: 120,
        color: "#4D5360",
        highlight: "#616774",
        label: "Dark Grey"
    }
];
var ctx = document.getElementById("myChart").getContext("2d");
var myNewChart = new Chart(ctx).PolarArea(data);
    
      </script>  
   </body>
</html>

Related Tutorials