<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"
}
});
This Pen doesn't use any external CSS resources.