Easy usage of
vegaorvega-liteinsvelteapplications!
See our Storybook Demo.
In your Svelte project, install svelte-vega with the following:
yarn add svelte-vegaor
npm install svelte-vega --saveThe following contains code samples for Svelte Vega and Vega-Lite components using TypeScript.
For an example Svelte project using svelte-vega, see the example application.
<script lang="ts">
import type { VisualizationSpec } from "svelte-vega";
import { Vega } from "svelte-vega";
const data = {
table: [
{ category: "A", amount: 28 },
{ category: "B", amount: 55 },
{ category: "C", amount: 43 },
{ category: "D", amount: 91 },
{ category: "E", amount: 81 },
{ category: "F", amount: 53 },
{ category: "G", amount: 19 },
{ category: "H", amount: 87 },
],
};
// For an example, see https://github.com/vega/svelte-vega/blob/main/packages/storybook/stories/spec1.ts
const spec: VisualizationSpec = // any vega spec.
</script>
<Vega {data} {spec} /><script lang="ts">
import type { VisualizationSpec } from "svelte-vega";
import { VegaLite } from "svelte-vega";
const data = {
table: [
{ category: "A", amount: 28 },
{ category: "B", amount: 55 },
{ category: "C", amount: 43 },
{ category: "D", amount: 91 },
{ category: "E", amount: 81 },
{ category: "F", amount: 53 },
{ category: "G", amount: 19 },
{ category: "H", amount: 87 },
],
};
const spec: VisualizationSpec = {
$schema: "https://vega.github.io/schema/vega-lite/v5.json",
description: "A simple bar chart with embedded data.",
data: {
name: "table",
},
mark: "bar",
encoding: {
x: { field: "category", type: "nominal" },
y: { field: "amount", type: "quantitative" },
},
}
</script>
<VegaLite {data} {spec} />