var marksCanvas = document.getElementById("marksChart");

​

Chart.defaults.font.family = "Lato";

Chart.defaults.font.size = 18;

Chart.defaults.color = "black";

​

var marksData = {

  labels: ["English", "Maths", "Physics", "Chemistry", "Biology", "History"],

  datasets: [{

    label: "Amanda",

    backgroundColor: "transparent",

    borderColor: "rgba(200,0,0,0.6)",

    fill: false,

    radius: 6,

    pointRadius: 6,

    pointBorderWidth: 3,

    pointBackgroundColor: "orange",

    pointBorderColor: "rgba(200,0,0,0.6)",

    pointHoverRadius: 10,

    data: [65, 75, 70, 80, 60, 80]

  }, {

    label: "Samantha",

    backgroundColor: "transparent",

    borderColor: "rgba(0,0,200,0.6)",

    fill: false,

    radius: 6,

    pointRadius: 6,

    pointBorderWidth: 3,

    pointBackgroundColor: "cornflowerblue",

    pointBorderColor: "rgba(0,0,200,0.6)",

    pointHoverRadius: 10,

    data: [54, 65, 60, 70, 70, 75]

  }]

};

​

var chartOptions = {

  plugins: {

    legend: {

      position: "top",

      align: "start",

      labels: {

        boxWidth: 50,

        usePointStyle: true,

        pointStyle: "line"

      }

    }

  },

  scales: {

    r: {

      min: 30,

      max: 100,

      grid: {

        color: "gray",

        lineWidth: 1,

        borderDash: [2, 2]

      },

      angleLines: {

        color: "green",

        lineWidth: 3

      },

      ticks: {

        stepSize: 20,

        color: "white",

        backdropColor: "green",

      },

      pointLabels: {

        backdropColor: "black",

        backdropPadding: 5,

        color: "white",

        font: {

          size: 18

        }

      }

    }

  }

};

​

var radarChart = new Chart(marksCanvas, {

  type: 'radar',

  data: marksData,

  options: chartOptions

});