Getting Started

Install

pnpm add @inglorious/store @inglorious/charts @inglorious/web

Register chart types

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,
    },
  },
})

Render a config-first chart

import { html } from "@inglorious/web"

export const app = {
  render(api) {
    return html`${api.render("sales")}`
  },
}

Add base styles

import "@inglorious/charts/base.css"
import "@inglorious/charts/theme.css"