<div id="viz"></div>
@import url('https://fonts.googleapis.com/css2?family=Yomogi&display=swap');
new roughViz.Bar({
  element: "#viz",
  data: {
      labels: ['a', 'b'], 
      values: [10, 20],
  },
  axisFontSize:"2rem", //ラベル値の文字サイズ '1rem'
  axisRoughness:0.5,  //軸の手書きの度合い 0.5
  axisStrokeWidth:0.5,  //軸の線の太さ 0.5
  bowing:0.5,  //軸の歪み 0
  color:'pink',  //バーの色 'skyblue' ※1色のみ
  fillStyle:'hachure',  //バーの塗りつぶしパターン
  fillWeight:0,  //バーの塗りつぶしの度合い 0.5
  font:'Yomogi', //使用するフォントファミリ
  highlight:'red', //ホバーした時の色 'coral'
  innerStrokeWidth:1, //バーの塗りつぶしの間隔 1
  interactive:true,  //チャートがインタラクティブかどうか true
  margin:{
    top:50,
    right:30,
    bottom:100,
    left:100
  }, //マージンオブジェクト {top: 50, right: 20, bottom: 70, left: 100}
  padding:0.5, //バー間のパディング 0.1
  roughness:5, //チャートの粗さレベル 1
  simplification:0.5, //グラフの簡略化 0.2
  stroke:'blue', //バーのストロークの色 black
  strokeWidth:1, //バーのストロークのサイズ 1
  title: "テストの棒グラフ", //チャートのタイトル
  titleFontSize:'1.2rem', //タイトルのフォントサイズ '1rem'
  tooltipFontSize:'2rem', //ツールチップのフォントサイズ '0.95rem'
  xLabel:"Xラベル",
  yLabel:"Yラベル",
  labelFontSize:'1.2rem',  //ラベル値の文字サイズ '1rem'
});

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

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