svelte-vega

Easy usage of vega or vega-lite in svelte applications!

See our Storybook Demo.

Install

In your Svelte project, install svelte-vega with the following:

yarn add @rollup/plugin-json
yarn add svelte-vega

or

npm install @rollup/plugin-json --save
npm install svelte-vega --save

Then, you must add the JSON plugin @rollup/plugin-json to your rollup.config.js file.

import json from "@rollup/plugin-json"

...

export default {

 ...

  plugins: [
    json(),
  ]
}

Example Code

The 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.

Svelte <Vega> Component

<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} />

Svelte <VegaLite> Component

<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} />