#container
View Compiled
#container {
  width: 100%;
  height: 400px;
}
View Compiled
$(function () { 
  var myChart = Highcharts.chart('container', {
    chart: {
      // どんなタイプのグラフを表示させるか
      type: 'pie'
    },
    title: {
      // グラフのタイトル
      text: 'Donut Sample'
    },
    plotOptions: {
      pie: {
        // 円グラフの内側のサイズ
        innerSize: '90%'
      }
    },
    // 表示させるデータ
    series: [
      {
        name: 'Ratio',
        data: [
          // 進捗25%、残り75%
          [ 'progress', 25 ],
          [ 'remaining', 75 ]
        ]
      }
    ]
  });
});

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js
  2. https://code.highcharts.com/highcharts.js