gistfile1.js

  var charts = function () {
    // Chart.defaults.global.responsive = true;
    var data = {
      labels: ["Physical Body", "Emotions & Meaning", "Relationships", "Time", "Work/Career/Mission", "Finances", "Celebrate & Continue"],
      datasets: [
        {
            label: "My First dataset",
            fillColor: "rgba(244, 232, 244,0.7)",
            strokeColor: "rgba(244, 232, 244,0.7)",
            pointColor: "rgba(244, 232, 244,0.7)",
            pointStrokeColor: "#fff",
            pointHighlightFill: "#fff",
            pointHighlightStroke: "rgba(220,220,220,1)",
            data: [65, 59, 90, 81, 56, 55, 40]
        },
        {
            label: "My Second dataset",
            fillColor: "rgba(153, 205, 245,0.7)",
            strokeColor: "rgba(153, 205, 245,0.7)",
            pointColor: "rgba(153, 205, 245,0.7)",
            pointStrokeColor: "#fff",
            pointHighlightFill: "#fff",
            pointHighlightStroke: "rgba(151,187,205,1)",
            data: [28, 48, 40, 19, 96, 27, 100]
        }
      ]
    };
    // instantiation
    var ctx = document.getElementById("result-chart").getContext("2d");
    var resultChart = new Chart(ctx).Radar(data, {
      //Boolean - Whether to show lines for each scale point
      scaleShowLine : false,
      //Boolean - Whether we show the angle lines out of the radar
      angleShowLineOut : true,
      //Boolean - Whether to show labels on the scale
      scaleShowLabels : false,
      // Boolean - Whether the scale should begin at zero
      scaleBeginAtZero : true,
      //String - Colour of the angle line
      angleLineColor : "#DEE5EB",
      //Number - Pixel width of the angle line
      angleLineWidth : 1,
      //String - Point label font declaration
      pointLabelFontFamily : "'function_pro_bookbold'",
      //String - Point label font weight
      pointLabelFontStyle : "normal",
      //Number - Point label font size in pixels
      pointLabelFontSize : 14,
      //String - Point label font colour
      pointLabelFontColor : "#666",
      //Boolean - Whether to show a dot for each point
      pointDot : false,
      //Number - Radius of each point dot in pixels
      pointDotRadius : 3,
      //Number - Pixel width of point dot stroke
      pointDotStrokeWidth : 1,
      //Number - amount extra to add to the radius to cater for hit detection outside the drawn point
      pointHitDetectionRadius : 20,
      //Boolean - Whether to show a stroke for datasets
      datasetStroke : false,
      //Boolean - Whether to fill the dataset with a colour
      datasetFill : true,
    });

    $('#result-chart').click(function(evt){
        var activePoints = resultChart.getPointsAtEvent(evt);
        // => activePoints is an array of points on the canvas that are at the same position as the click event.
    });