<div class="grid">
  <div class="grid-item">
    <h2>More accessible</h2>
    <h3>Top Countries for Grape Production in 2020 (million tonnes)</h3>
    <canvas id="chartOne">
    </canvas>
  </div>
  <div class="grid-item">
    <h2>Less accessible</h2>
    <h3>Top Countries for Grape Production in 2020 (million tonnes)</h3><canvas id="chartTwo">
    </canvas>
  </div>
</div>
<div class="source">Source:
  <a href="https://en.wikipedia.org/wiki/List_of_countries_by_grape_production">List of countries by grape production</a>
</div>

@import url(https://fonts.googleapis.com/css?family=Open+Sans);

body {
  font-family: "Open Sans", sans-serif;
  margin: 0.5rem;
}

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(420px, 1fr));
}

.grid-item {
  padding: 0 1.25rem;
  margin: 0 auto;
  text-align: center;
  overflow: hidden;
}

h2 {
  text-align: center;
}

h3 {
  text-align: center;
  margin-bottom: -2rem;
}

.source {
  text-align: center;
  display: block;
  margin-top: 2rem;
}

var xValues = [
  "China (14.7)",
  "Italy (8.2)",
  "Spain (6.8)",
  "France (5.9)",
  "US (5.4)"
];
var yValues = [14769088, 8222360, 6817770, 5884230, 5388679];
var borColor = ["#000000"];
var barColors1 = [
  pattern.draw("dot", "#BB60F0"),
  pattern.draw("diamond", "#FA85B6"),
  pattern.draw("weave", "#F0DD90"),
  pattern.draw("zigzag-horizontal", "#7FB2FA"),
  pattern.draw("triangle", "#58EDF5")
];
var barColors2 = ["#A750E6", "#D954F0", "#D957BA", "#F0547D", "#E65A50"];

new Chart("chartOne", {
  type: "doughnut",
  options: {
    plugins: {
      legend: {
        position: "right",
        labels: {
          color: "#000000",
          font: {
            size: 16
          }
        }
      }
    }
  },
  data: {
    labels: xValues,
    datasets: [
      {
        backgroundColor: barColors1,
        borderColor: borColor,
        data: yValues
      }
    ]
  }
});

new Chart("chartTwo", {
  type: "doughnut",
  options: {
    plugins: {
      legend: {
        position: "right",
        labels: {
          color: "#999999",
          font: {
            size: 16
          }
        }
      }
    }
  },
  data: {
    labels: xValues,
    datasets: [
      {
        backgroundColor: barColors2,
        borderWidth: 0,
        data: yValues
      }
    ]
  }
});