Spaces:
Running
Running
Update index.html
Browse files- index.html +25 -19
index.html
CHANGED
@@ -1,19 +1,25 @@
|
|
1 |
-
|
2 |
-
<
|
3 |
-
|
4 |
-
|
5 |
-
|
6 |
-
|
7 |
-
|
8 |
-
|
9 |
-
|
10 |
-
|
11 |
-
|
12 |
-
|
13 |
-
|
14 |
-
|
15 |
-
|
16 |
-
|
17 |
-
|
18 |
-
|
19 |
-
|
|
|
|
|
|
|
|
|
|
|
|
|
|
1 |
+
<svg class="line-chart"></svg>
|
2 |
+
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/chart.xkcd.min.js"></script>
|
3 |
+
<script>
|
4 |
+
const svg = document.querySelector('.line-chart')
|
5 |
+
|
6 |
+
const lineChart = new chartXkcd.Line(svg, {
|
7 |
+
title: 'Monthly income of an indie developer', // optional
|
8 |
+
xLabel: 'Month', // optional
|
9 |
+
yLabel: '$ Dollors', // optional
|
10 |
+
data: {
|
11 |
+
labels: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10'],
|
12 |
+
datasets: [{
|
13 |
+
label: 'Plan',
|
14 |
+
data: [30, 70, 200, 300, 500, 800, 1500, 2900, 5000, 8000],
|
15 |
+
}, {
|
16 |
+
label: 'Reality',
|
17 |
+
data: [0, 1, 30, 70, 80, 100, 50, 80, 40, 150],
|
18 |
+
}],
|
19 |
+
},
|
20 |
+
options: { // optional
|
21 |
+
yTickCount: 3,
|
22 |
+
legendPosition: chartXkcd.config.positionType.upLeft
|
23 |
+
}
|
24 |
+
});
|
25 |
+
</script>
|