vega-lite-api

import { vl } from 'vega-lite-api'; import vega from 'vega'; import vegaLite from 'vega-lite'; // In a browser environment, you would typically load vega, vega-lite, and vega-tooltip via CDN. // For Node.js or bundlers, you'd import them. // For this example, we mock the registration that happens in a browser. const options = { config: { // vega-lite default configuration }, init: (view) => { // Example: enable horizontal scrolling for large plots // if (view.container()) view.container().style["overflow-x"] = "auto"; }, view: { // view constructor options loader: vega.loader({ baseURL: "https://cdn.jsdelivr.net/npm/vega-datasets@1/" }), renderer: "canvas" } }; // Simulate browser registration for demonstration const mockGlobalVega = vega; const mockGlobalVegaLite = vegaLite; if (typeof globalThis !== 'undefined') { globalThis.vega = mockGlobalVega; globalThis.vegaLite = mockGlobalVegaLite; } vl.register(mockGlobalVega, mockGlobalVegaLite, options); const chartSpec = vl.markBar({ tooltip: true }) .data([ { a: "A", b: 28 }, { a: "B", b: 55 }, { a: "C", b: 43 }, { a: "D", b: 91 }, { a: "E", b: 81 } ]) .encode( vl.x().fieldQ("b"), vl.y().fieldN("a"), vl.tooltip([vl.fieldQ("b"), vl.fieldN("a")]) ) .toJSON(); // In a real browser scenario, you would call .render().then(chart => document.body.appendChild(chart)); // For a Node.js context, you would typically work with the JSON specification. console.log(JSON.stringify(chartSpec, null, 2));