<h1>PieChart with Chartist</h1>
<div class="wrapper">
  <div class="chart"></div>
  <div class="chart2"></div>
</div>

body{
   font-family: 'Comfortaa', cursive;
}

.wrapper{
  position: relative;
  width: 350px;
  height: 350px;
  margin: auto;
}

h1{
  text-align: center;
  letter-spacing: 2px;
  font-weight: 400;
  font-size:40px;
  color: #3b4347;
  margin:100px 0px 40px 0px;
}

.chart{
  width: 344px;
  height: 344px;
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
  .ct-series-a .ct-slice-donut{
    stroke:#FFDCC8;
  }
  .ct-series-b .ct-slice-donut{
    stroke:#e7e8e9;
  }
  .ct-series-c .ct-slice-donut{
    stroke:#b5d4e1;
  }
}

.chart2{
  width: 235px;
  height: 235px;
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
  .ct-series-a .ct-slice-pie{
    stroke:#b7dfd2;
    fill:#b7dfd2;
  }
  .ct-series-b .ct-slice-pie{
    stroke:#f3ddaf;
    fill:#f3ddaf;
  }
}

.base{
  width: 350px;
  height: 350px;
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
  path{
    width: 350px;
    height: 350px;
  }
}

.start{
  font-size:20px;
  display: inline-block;
  position: absolute;
  left:50%;
  top:50%;
  z-index:10;
  transition:all .3s;
  transform: translate(-50%,-50%);
  letter-spacing:0em;
  cursor: pointer;
  &:hover{
    letter-spacing:0.2em;
  }
}

//グラフの設定
  let chartBig = new Chartist.Pie('.chart', {
    series: [91, 3, 6],
    labels: ['BigChart',' ',' ']
  }, {
    donut: true,
    donutWidth: 52
  });

  let chartSmall = new Chartist.Pie('.chart2', {
    series: [80, 11],
    labels: ['SmallChart',' ',' ']
  }, {
    donutWidth: 52
  });