Rendering

import '@opendata-ai/openchart-react/styles.css';
import { Chart, DataTable, Graph, Sankey, VizThemeProvider } from '@opendata-ai/openchart-react';

<Chart spec={chartSpec} darkMode="auto" />
<DataTable spec={tableSpec} onRowClick={(row) => console.log(row)} />
<Graph spec={graphSpec} onNodeClick={(node) => console.log(node)} />
<Sankey spec={sankeySpec} />

<VizThemeProvider theme={myTheme}>
  <Chart spec={spec1} />
  <DataTable spec={spec2} />
</VizThemeProvider>

import { useEffect, useState } from "react";
import { Chart } from "@opendata-ai/openchart-react";

function ThemedChart({ spec, darkMode = "auto", ...props }) {
  const [docTheme, setDocTheme] = useState(() =>
    typeof document !== "undefined"
      ? document.documentElement.classList.contains("dark") ? "dark" : "light"
      : "dark"
  );

  useEffect(() => {
    setDocTheme(document.documentElement.classList.contains("dark") ? "dark" : "light");
    const observer = new MutationObserver(() => {
      setDocTheme(document.documentElement.classList.contains("dark") ? "dark" : "light");
    });
    observer.observe(document.documentElement, { attributes: true, attributeFilter: ["class"] });
    return () => observer.disconnect();
  }, []);

  const resolved = darkMode === "auto"
    ? docTheme === "dark" ? "force" : "off"
    : darkMode;

  return <Chart spec={spec} darkMode={resolved} {...props} />;
}

import { Chart, DataTable, Graph, Sankey, VizThemeProvider } from '@opendata-ai/openchart-vue';

<Chart :spec="chartSpec" darkMode="auto" />
<DataTable :spec="tableSpec" />
<Graph :spec="graphSpec" />
<Sankey :spec="sankeySpec" />

import { Chart, DataTable, Graph, Sankey, ThemeProvider } from '@opendata-ai/openchart-svelte';

<Chart {spec} darkMode="auto" />
<DataTable {spec} />
<Graph {spec} />
<Sankey {spec} />

<!-- Load the stylesheet -->
<link rel="stylesheet" href="https://esm.sh/@opendata-ai/openchart-vanilla/styles.css">

<script type="module">
import { createChart, createTable, createSankey } from 'https://esm.sh/@opendata-ai/openchart-vanilla';

createChart(document.getElementById('chart'), spec);
createTable(document.getElementById('table'), tableSpec);
createSankey(document.getElementById('sankey'), sankeySpec);
</script>

import { createChart, createTable, createGraph, createSankey } from "@opendata-ai/openchart-vanilla";

// Charts
const chart = createChart(container, spec, { darkMode: "auto", responsive: true });
chart.update(newSpec);
const svgString = chart.export("svg");           // returns string
const pngBlob = await chart.export("png");       // returns Promise<Blob>
const csvString = chart.export("csv");            // returns string
chart.destroy();

// Tables
const table = createTable(container, tableSpec, { responsive: true });
table.export("csv");                              // returns string (all filtered/sorted rows)
table.getState();                                 // { sort, search, page }
table.setState({ search: "query", page: 0 });    // programmatic state control
table.destroy();

// Graphs
const graph = createGraph(container, graphSpec, { responsive: true });
graph.search("query");
graph.zoomToFit();
graph.zoomToNode("node-id");
graph.selectNode("node-id");
graph.destroy();

// Sankey
const sankey = createSankey(container, sankeySpec, { darkMode: "auto", responsive: true });
sankey.update(newSpec);
sankey.destroy();

import { lineChart, barChart, columnChart, pieChart, scatterChart, dataTable, inferFieldType } from "@opendata-ai/openchart-core";

const spec = lineChart(data, "date", "revenue", { color: "region", chrome: { title: "Revenue by region" } });
const spec = barChart(data, "category", "value");  // note: barChart(data, category, value) not (data, x, y)
const spec = dataTable(data, { search: true, pagination: { pageSize: 20 } });

// inferFieldType samples data values and returns "quantitative"|"temporal"|"nominal"
const fieldType = inferFieldType(data, "fieldName");