tiny-spark 0.1.0-alpha.3 → 0.1.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +37 -0
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -7,6 +7,9 @@
|
|
|
7
7
|
|
|
8
8
|
An elegant, reactive and responsive sparkline chart solution without dependency.
|
|
9
9
|
|
|
10
|
+
<img width="500" alt="image" src="https://github.com/user-attachments/assets/d312a234-8e09-44a2-89fd-5ae85a6cdbec" />
|
|
11
|
+
|
|
12
|
+
|
|
10
13
|
## Installation
|
|
11
14
|
|
|
12
15
|
```
|
|
@@ -38,3 +41,37 @@ Just set up a div with a "tiny-spark" class, with a few data attributes to confi
|
|
|
38
41
|
></div>
|
|
39
42
|
</div>
|
|
40
43
|
```
|
|
44
|
+
|
|
45
|
+
## Styling
|
|
46
|
+
|
|
47
|
+
tiny-spark is headless.
|
|
48
|
+
|
|
49
|
+
Target the following css classes to customize elements:
|
|
50
|
+
|
|
51
|
+
```css
|
|
52
|
+
/** the chart container (div element) */
|
|
53
|
+
.tiny-spark {
|
|
54
|
+
}
|
|
55
|
+
|
|
56
|
+
/** the tooltip (div element) */
|
|
57
|
+
.tiny-spark-tooltip {
|
|
58
|
+
/** just display:none if you don't need it */
|
|
59
|
+
}
|
|
60
|
+
|
|
61
|
+
/** the indicator (svg line element) */
|
|
62
|
+
.tiny-spark-indicator {
|
|
63
|
+
/** for example: customize stroke-dasharray */
|
|
64
|
+
}
|
|
65
|
+
|
|
66
|
+
/** the plots (svg circle element) */
|
|
67
|
+
.tiny-spark-datapoint-circle {
|
|
68
|
+
}
|
|
69
|
+
|
|
70
|
+
/** the chart line (svg path element) */
|
|
71
|
+
.tiny-spark-line-path {
|
|
72
|
+
}
|
|
73
|
+
|
|
74
|
+
/** the chart area (svg path element) */
|
|
75
|
+
.tiny-spark-line-area {
|
|
76
|
+
}
|
|
77
|
+
```
|
package/package.json
CHANGED