const densityCanvas = document.getElementById("densityChart");

​

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

Chart.defaults.font.size = 22;

Chart.defaults.color = "black";

​

let gravityBars = '#F06292';

let densityBars = '#4DB6AC';

​

let densityData = {

  label: "Density of Planet (kg/m3)",

  data: [5427, 5243, 5514, 3933, 1326, 687, 1271, 1638],

  backgroundColor: densityBars,

  yAxisID: "y-axis-density"

};

​

let gravityData = {

  label: "Gravity of Planet (m/s2)",

  data: [3.7, 8.9, 9.8, 3.7, 23.1, 9.0, 8.7, 11.0],

  backgroundColor: gravityBars,

  yAxisID: "y-axis-gravity"

};

let planetData = {

  labels: [ "Mercury", "Venus", "Earth", "Mars", "Jupiter", "Saturn", "Uranus", "Neptune"],

  datasets: [densityData, gravityData]

};

​

let chartOptions = {

  barPercentage: 1,

  categoryPercentage: 0.8,

  scales: {

    "y-axis-density": {

      grid: {

        color: densityBars,

        tickColor: densityBars,

        borderColor: densityBars

      },

      ticks: {

        color: densityBars

      },

      position: "left"

    },

    "y-axis-gravity": {

      grid: {

        color: gravityBars,

        tickColor: gravityBars,

        borderColor: gravityBars

      },

      ticks: {

        color: gravityBars

      },

      position: "right"

    }

  }

};

​

let barChart = new Chart(densityCanvas, {

  type: "bar",

  data: planetData,

  options: chartOptions

});

​