Никак не могу понять почему у меня размер графика очень маленький. Как мне его сделать больше?
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Курс валют</title>
</head>
<body>
<h1>Текущий курс доллара и евро за последний месяц</h1>
<h2>По данным ЦБ РФ</h2>
<p>Статический одностаничный сайт создан для образовательных целей</p>
<script src="lib/liteChart.min.js"></script>
<div id="chart1" style="height: 500px;"></div>
<script>
document.addEventListener("DOMContentLoaded", function(){
// Create liteChart.js Object
let d = new liteChart("chart", {
axisX: {
show: true,
color: "#e9edf1",
width: 2,
value: "₽",
},
axisY: {
show: true,
color: "#e9edf1",
width: 2,
value: "",
minValue: 0,
maxValue: 0,
},
fill: null,
gridX: {
show: true,
interval: 170,
fill: 1,
label: {
show: true
},
stroke:"#e9edf1",
width:2,
dasharray:"0 10.04",
linecap:"round",
},
gridY: {
show: false,
},
line: {
width: 2,
style: "straight",
shadow: true,
},
point: {
show: true,
radius: 4,
strokeWidth: 3,
stroke: "#ffffff", // null or color by hex/rgba
}
});
// Set labels
d.setLabels(["1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12", "13", "14", "15", "16", "17", "18", "19", "20", "21", "22", "23", "24", "25", "26", "27", "28", "29", "30", "31"]);
// Set legends and values
d.addLegend({"name": "Man", "stroke": "#FFC107", "fill": "#fff", "values": [100, 200, 450, 400, -120, 300, 700, 860, 601, 705, 604, 803, 150, 240, 230, 300, 200, 150, 270, 200,100, 200, 450, 400, 240, 230, 300, 200, 180, 270, 134]});
d.addLegend({"name": "Woman", "stroke": "#9E9E9E", "fill": "#fff", "values": [200, 350, 240, 480, 150, 240, 230, 300, 200, 150, 270, 200,100, 200, 450, -50, -220, -300, 400, 860, 601, 705, 604, 803,200, 350, 240, 480, 150,53,423]});
// Inject chart into DOM object
let div = document.getElementById("chart1");
d.inject(div);
// Draw
d.draw();
});
</script>
</body>
</html>
Простой
