<div id="viz"></div>
@import url('https://fonts.googleapis.com/css2?family=Yomogi&display=swap');
new roughViz.Donut({
  element: "#viz",
  data: {
      labels: ['a', 'b'], 
      values: [10, 20],
  },
  bowing:0,  //軸の歪み 0
  colors:['pink','skyblue'],  //バーの色 'skyblue' ※1色のみ
  fillStyle:'hachure',  //バーの塗りつぶしパターン
  fillWeight:0.85,  //バーの塗りつぶしの度合い 0.5
  font:'Yomogi', //使用するフォントファミリ
  highlight:'coral', //ホバーした時の色 'coral'
  innerStrokeWidth:1, //バーの塗りつぶしの間隔 1
  interactive:true,  //チャートがインタラクティブかどうか true
  legend:true,   //脚注を入れるかどうか true
  legendPosition:'right',  //脚注の位置(right or left) right
  margin:{
    top:50,
    right:30,
    bottom:150,
    left:60
  }, //マージンオブジェクト {top: 50, right: 20, bottom: 70, left: 100}
  padding:0.5, //パディング 0.1
  roughness:1, //グラフの粗さレベル 1
  simplification:0.5, //グラフの簡略化 0.2
  strokeWidth:1, //ストロークのサイズ 1
  title: "テストの棒グラフ", //チャートのタイトル
  titleFontSize:'1.2rem', //タイトルのフォントサイズ '1rem'
  tooltipFontSize:'2rem', //ツールチップのフォントサイズ '0.95rem'
});

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://unpkg.com/rough-viz@1.0.6