@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"
  }
});