<h1>PieChart with Chartist</h1>
<h2>Animation</h2>
<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 0px 0px;
}

h2{
  text-align: center;
  letter-spacing: 2px;
  margin-top: 20px;
  font-size:20px;
}

.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-donut{
    stroke:#b7dfd2;
  }
  .ct-series-b .ct-slice-donut{
    stroke:#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;
  }
}
View Compiled
//グラフの設定
let chartBig = new Chartist.Pie('.chart', {
    series: [91, 3, 6]
  }, {
    donut: true,
    donutWidth: 52,
    showLabel: false
  });

let chartSmall = new Chartist.Pie('.chart2', {
    series: [80, 11]
  }, {
    donut: true,
    donutWidth: 52,
    showLabel: false
});


//アニメーションの関数
function charts(elm) {
  
  //グラフの描画するアクション
  elm.on('draw',(data)=>{
  
  //グラフに割り当てられたDataを取り出す
  if(data.type === 'slice'){
    
    //dasharrayの長さを設定します。
    let pathLength = data.element._node.getTotalLength();
    
    //pathにstroke-dasharrayの数値を代入する。
    data.element.attr({
      'stroke-dasharray': pathLength + 'px ' + pathLength + 'px'
    });
   
   //アニメーションの設定
   let animationDefinition = {
      'stroke-dashoffset': {
        id: 'anim' + data.index,
        dur: 1000,
        from: -pathLength + 'px',
        to:  '0px',
        easing: Chartist.Svg.Easing.easeOutQuint,
        //fillの初期値を設定、これがないと最初のアニメーションがみれなくなってしまう。
        fill: 'freeze'
      }
    };
    
    //最初のdataでない場合、アニメーションの時間を計測して前のアニメーションの終了イベントを発生させる
    if(data.index !== 0){
      animationDefinition['stroke-dashoffset'].begin = 'anim' + (data.index - 1) + '.end';
    }
    
    //pathにstroke-dasharrayの初期値を代入する
    data.element.attr({
      'stroke-dashoffset': -pathLength + 'px'
    });
    
    //アニメーションの開始
    data.element.animate(animationDefinition, false);
   }
  }); 
}

//デカいグラフのアニメーション
charts(chartBig);
//小さいグラフのアニメーション
charts(chartSmall);
View Compiled

External CSS

  1. https://cdn.rawgit.com/gionkunz/chartist-js/master/dist/chartist.css
  2. https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/chartist/0.9.8/chartist.min.js
  2. https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js