<div>
  <svg class="line-chart"></svg>
</div>
@import url('https://fonts.googleapis.com/css2?family=Yomogi&display=swap');

div{
  width:300px;
}

.line-chart {
  width:100%;
  //font-family: 'Yomogi', cursive !important;
}
const svg = document.querySelector(".line-chart");
 
new chartXkcd.Line(svg, {
  title: "デベロッパーの月収",
  xLabel: "月",
  yLabel: "$ ドル",
  data: {
    labels: ["1", "2", "3", "4", "5", "6", "7", "8", "9", "10"],
    datasets: [
      {
        label: "計画",
        data: [30, 70, 200, 300, 500, 800, 1500, 2900, 5000, 3000]
      },
      {
        label: "現実",
        data: [0, 1, 30, 70, 80, 100, 50, 80, 40, 150]
      }
    ]
  },
  options: {
     yTickCount: 3,
     showLegend:true,
     legendPosition:chartXkcd.config.positionType.upLeft,
     dataColors:["#0000ff","#ff0000"],
     fontFamily:'Yomogi',
     unxkcdify:false,
     strokeColor:"#000000",
     backgroundColor:"#ffffff"
  }
});

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdn.jsdelivr.net/npm/chart.xkcd@1/dist/chart.xkcd.min.js