Inglorious ChartsGetting Started
Install
bash
pnpm add @inglorious/store @inglorious/charts @inglorious/web
1
Register chart types
js
import { createStore } from "@inglorious/store"
import { Chart } from "@inglorious/charts"
export const store = createStore({
types: {
Line: Chart,
Area: Chart,
Bar: Chart,
Pie: Chart,
Donut: Chart,
},
entities: {
sales: {
type: "Line",
data: [
{ name: "Jan", value: 100 },
{ name: "Feb", value: 160 },
{ name: "Mar", value: 120 },
],
width: 800,
height: 400,
hasGrid: true,
hasTooltip: 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
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
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