var birdsCanvas = document.getElementById("birdsChart");

​

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

Chart.defaults.font.size = 28;

Chart.defaults.color = "black";

​

var birdsData = {

  labels: ["Spring", "Summer", "Fall", "Winter"],

  datasets: [{

    data: [1200, 1700, 800, 200],

    backgroundColor: [

      "rgba(255, 0, 0, 0.1)",

      "rgba(0, 255,200, 0.1)",

      "rgba(200, 0, 200, 0.1)",

      "rgba(0, 255, 0, 0.1)"

    ]

  }],

};

​

var chartOptions = {

  plugins: {

    title: {

      display: true,

      position: "bottom",

      text: "Migratory Birds in Different Seasons"

    },

    legend: {

      align: "center",

      position: "left",

      labels: {

        font: {

          size: 16

        }

      }

    }

  },

  animation: {

    animateRotate: false

  },

  scales: {

    r: {

      ticks: {

        font: {

          size: 16,

        },

        color:"white",

        backdropColor: "black"

      }

    },

  },

  elements: {

    arc: {

      angle: 180,

      borderColor: "black"

    }

  }

};

​

var polarAreaChart = new Chart(birdsCanvas, {

  type: 'polarArea',

  data: birdsData,

  options: chartOptions

});