Inglorious ChartsGetting Started
Install
bash
pnpm add @inglorious/charts @inglorious/web
1
Register chart types
js
import { createStore } from "@inglorious/web"
import {
lineChart,
areaChart,
barChart,
pieChart,
donutChart,
chart,
} from "@inglorious/charts"
export const store = createStore({
types: {
line: lineChart,
area: areaChart,
bar: barChart,
pie: pieChart,
donut: donutChart,
chart,
},
entities: {
sales: {
type: "line",
data: [
{ name: "Jan", value: 100 },
{ name: "Feb", value: 160 },
{ name: "Mar", value: 120 },
],
width: 800,
height: 400,
showGrid: true,
showTooltip: true,
},
},
})
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
32
33
34
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
32
33
34
Render a config-first chart
js
import { html } from "@inglorious/web"
export const app = {
render(api) {
return html`${api.render("sales")}`
},
}
1
2
3
4
5
6
7
2
3
4
5
6
7
Add base styles
js
import "@inglorious/charts/base.css"
import "@inglorious/charts/theme.css"
1
2
2