@chartts/vue 0.1.3 → 0.1.4
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 +72 -0
- package/package.json +5 -4
package/README.md
ADDED
|
@@ -0,0 +1,72 @@
|
|
|
1
|
+
<p align="center">
|
|
2
|
+
<a href="https://www.npmjs.com/package/@chartts/vue"><img src="https://img.shields.io/npm/v/@chartts/vue?color=06B6D4&label=npm" alt="npm version" /></a>
|
|
3
|
+
<a href="https://github.com/chartts/chartts/blob/main/LICENSE"><img src="https://img.shields.io/badge/license-MIT-06B6D4" alt="MIT License" /></a>
|
|
4
|
+
<a href="https://chartts.com"><img src="https://img.shields.io/badge/docs-chartts.com-06B6D4" alt="Documentation" /></a>
|
|
5
|
+
</p>
|
|
6
|
+
|
|
7
|
+
# @chartts/vue
|
|
8
|
+
|
|
9
|
+
Chartts for Vue. 40+ chart types, beautiful defaults, Tailwind ready.
|
|
10
|
+
|
|
11
|
+
## Install
|
|
12
|
+
|
|
13
|
+
```bash
|
|
14
|
+
npm install @chartts/vue @chartts/core
|
|
15
|
+
```
|
|
16
|
+
|
|
17
|
+
## Quick start
|
|
18
|
+
|
|
19
|
+
```vue
|
|
20
|
+
<script setup>
|
|
21
|
+
import { LineChart } from "@chartts/vue"
|
|
22
|
+
const data = {
|
|
23
|
+
labels: ["Jan", "Feb", "Mar", "Apr", "May", "Jun"],
|
|
24
|
+
series: [{ name: "Revenue", values: [4200, 5800, 7100, 6400, 8200, 9600] }]
|
|
25
|
+
}
|
|
26
|
+
</script>
|
|
27
|
+
|
|
28
|
+
<template>
|
|
29
|
+
<LineChart :data="data" />
|
|
30
|
+
</template>
|
|
31
|
+
```
|
|
32
|
+
|
|
33
|
+
## Available components
|
|
34
|
+
|
|
35
|
+
Every chart type has a dedicated component: `LineChart`, `BarChart`, `AreaChart`, `PieChart`, `DonutChart`, `ScatterChart`, `CandlestickChart`, `RadarChart`, `HeatmapChart`, `TreemapChart`, `GaugeChart`, `WaterfallChart`, `FunnelChart`, `SankeyChart`, and 25+ more.
|
|
36
|
+
|
|
37
|
+
All components accept the same `data` prop and all `ChartOptions` as props.
|
|
38
|
+
|
|
39
|
+
## Theming
|
|
40
|
+
|
|
41
|
+
```ts
|
|
42
|
+
// Built-in presets
|
|
43
|
+
<LineChart data={data} theme="corporate" />
|
|
44
|
+
<LineChart data={data} theme="ocean" />
|
|
45
|
+
|
|
46
|
+
// Auto light/dark
|
|
47
|
+
<LineChart data={data} theme="auto" />
|
|
48
|
+
|
|
49
|
+
// Extra themes from @chartts/themes
|
|
50
|
+
import { neonTheme } from "@chartts/themes"
|
|
51
|
+
<LineChart data={data} theme={neonTheme} />
|
|
52
|
+
```
|
|
53
|
+
|
|
54
|
+
## Why Chartts?
|
|
55
|
+
|
|
56
|
+
- **Beautiful by default** — zero config charts that look great
|
|
57
|
+
- **Under 15kb gzipped** — the entire core library
|
|
58
|
+
- **Real SVG** — CSS works. Devtools work. Screen readers work.
|
|
59
|
+
- **Tailwind ready** — style with classes you already know
|
|
60
|
+
- **TypeScript-first** — strict types, autocomplete everywhere
|
|
61
|
+
|
|
62
|
+
## Part of Chartts
|
|
63
|
+
|
|
64
|
+
Beautiful charts. Tiny bundle. Every framework.
|
|
65
|
+
|
|
66
|
+
- [Documentation](https://chartts.com/docs)
|
|
67
|
+
- [GitHub](https://github.com/chartts/chartts)
|
|
68
|
+
- [All packages](https://www.npmjs.com/org/chartts)
|
|
69
|
+
|
|
70
|
+
## License
|
|
71
|
+
|
|
72
|
+
MIT
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@chartts/vue",
|
|
3
|
-
"version": "0.1.
|
|
4
|
-
"description": "Chartts Vue
|
|
3
|
+
"version": "0.1.4",
|
|
4
|
+
"description": "Chartts for Vue. 40+ chart types, beautiful defaults, Tailwind ready.",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"main": "./dist/index.cjs",
|
|
7
7
|
"module": "./dist/index.js",
|
|
@@ -14,12 +14,13 @@
|
|
|
14
14
|
}
|
|
15
15
|
},
|
|
16
16
|
"files": [
|
|
17
|
-
"dist"
|
|
17
|
+
"dist",
|
|
18
|
+
"README.md"
|
|
18
19
|
],
|
|
19
20
|
"sideEffects": false,
|
|
20
21
|
"peerDependencies": {
|
|
21
22
|
"vue": ">=3.3.0",
|
|
22
|
-
"@chartts/core": "0.1.
|
|
23
|
+
"@chartts/core": "0.1.4"
|
|
23
24
|
},
|
|
24
25
|
"license": "MIT",
|
|
25
26
|
"repository": {
|