# Vega-Lite in SWISH? **URL:** \ **Category:** General\ **Created:** [September 25, 2025, 7:21pm UTC](https://swi-prolog.discourse.group/t/vega-lite-in-swish/9321 "2025-09-25T19:21:14Z")\ **Posts on this page:** 9\ **Page:** 1
**Author:** ![kwon-young](https://yyz2.discourse-cdn.com/free1/user_avatar/swi-prolog.discourse.group/kwon-young/32/4841_2.png) [@kwon-young](https://swi-prolog.discourse.group/u/kwon-young)\ **Post date:** [September 25, 2025, 7:21pm UTC](https://swi-prolog.discourse.group/t/vega-lite-in-swish/9321/1 "2025-09-25T19:21:14Z")
Hello, When using SWISH, I really liked the graphing capability using c3, but found it a bit limiting. I have previously used vega-lite and seems to be really similar to c3, where the whole graph is defined in json. I have tried to render [a self-contained html rendering](https://vega.github.io/vega-lite/tutorials/getting_started.html#embed) of a vega-lite graph but [the swish notebook](https://swish.swi-prolog.org/p/vega-lite.swinb) gives me an error `vegaEmbed not defined`. How hard would it be to embed vega-lite in swish like for c3 ? ---
**Author:** ![jan](https://yyz2.discourse-cdn.com/free1/user_avatar/swi-prolog.discourse.group/jan/32/4_2.png) [@jan](https://swi-prolog.discourse.group/u/jan)\ **Post date:** [September 26, 2025, 7:03am UTC](https://swi-prolog.discourse.group/t/vega-lite-in-swish/9321/2 "2025-09-26T07:03:39Z")
> [@kwon-young](#): > > How hard would it be to embed vega-lite in [swish](https://swish.swi-prolog.org/) like for c3 ? Probably not too hard. You could try with a local copy. There is a JS plugin system, see e.g. `config-available/plugin_slider.pl`. Possibly that works for vega-lite as well. If it works and you add the necessary usage pages as there exist for the other rendering frameworks, I’m happy to merge a PR. ---
**Author:** ![kwon-young](https://yyz2.discourse-cdn.com/free1/user_avatar/swi-prolog.discourse.group/kwon-young/32/4841_2.png) [@kwon-young](https://swi-prolog.discourse.group/u/kwon-young)\ **Post date:** [September 26, 2025, 10:08am UTC](https://swi-prolog.discourse.group/t/vega-lite-in-swish/9321/3 "2025-09-26T10:08:50Z")
Thank you for the pointer. I have tried adding a `config-available/plugin_vegalite.pl` file with the content: ```prolog :- module(swish_config_plugin_vegalite, []). :- multifile swish_config:web_plugin/1. swish_config:web_plugin( json{name: vega, js: ['https://cdn.jsdelivr.net/npm/vega@6', 'https://cdn.jsdelivr.net/npm/vega-lite@6', 'https://cdn.jsdelivr.net/npm/vega-embed@7'] }). ``` But I am getting a blank swish page, and after enabling debug mode, I get the following messages: ```prolog % [Thread httpd@localhost:3050_1] 12:04:46.042 [77] get /js/vega.js ... % [Thread httpd@localhost:3050_2] 12:04:46.042 [78] get /js/vega-lite.js ... % [Thread httpd@localhost:3050_2] 12:04:46.044 [78] 404 not_found(/js/vega-lite.js); 97 bytes % [Thread httpd@localhost:3050_1] 12:04:46.044 [77] 404 not_found(/js/vega.js); 87 bytes % [Thread httpd@localhost:3050_2] 12:04:46.044 GET /js/vega-lite.js: [404] not_found(/js/vega-lite.js) % [Thread httpd@localhost:3050_1] 12:04:46.044 GET /js/vega.js: [404] not_found(/js/vega.js) ``` From what I can understand, the vega-lite library depends on `vega.js` and `vega-embed` depends on both `vega.js` and `vega-lite.js` which it doesn’t find. Is this because the plugin system doesn’t support dependencies ? ---
**Author:** ![jan](https://yyz2.discourse-cdn.com/free1/user_avatar/swi-prolog.discourse.group/jan/32/4_2.png) [@jan](https://swi-prolog.discourse.group/u/jan)\ **Post date:** [September 26, 2025, 11:29am UTC](https://swi-prolog.discourse.group/t/vega-lite-in-swish/9321/4 "2025-09-26T11:29:45Z")
> [@kwon-young](#): > > Is this because the plugin system doesn’t support dependencies ? I think the problem is with `require.js`. See end of swish.js where the plugins are collected and loaded by means of require(). I think the route is to install vega as an npm module and use local paths. But … my JavaScript is a little rusty at the moment … ---
**Author:** ![kwon-young](https://yyz2.discourse-cdn.com/free1/user_avatar/swi-prolog.discourse.group/kwon-young/32/4841_2.png) [@kwon-young](https://swi-prolog.discourse.group/u/kwon-young)\ **Post date:** [September 26, 2025, 5:36pm UTC](https://swi-prolog.discourse.group/t/vega-lite-in-swish/9321/5 "2025-09-26T17:36:10Z")
I have managed to make something work ! ![image](https://global.discourse-cdn.com/free1/uploads/swiprolog/original/2X/1/1b03ac884851f546fcd3c6ce79f3f8810e991e39.png) And I have made [a PR on github](https://github.com/SWI-Prolog/swish/pull/192) if you want to review it ? ---
**Author:** ![jan](https://yyz2.discourse-cdn.com/free1/user_avatar/swi-prolog.discourse.group/jan/32/4_2.png) [@jan](https://swi-prolog.discourse.group/u/jan)\ **Post date:** [September 27, 2025, 9:08am UTC](https://swi-prolog.discourse.group/t/vega-lite-in-swish/9321/6 "2025-09-27T09:08:26Z")
Great. Can’t we get rid of the schema line, adding it in the rendering code? ---
**Author:** ![kwon-young](https://yyz2.discourse-cdn.com/free1/user_avatar/swi-prolog.discourse.group/kwon-young/32/4841_2.png) [@kwon-young](https://swi-prolog.discourse.group/u/kwon-young)\ **Post date:** [September 27, 2025, 12:15pm UTC](https://swi-prolog.discourse.group/t/vega-lite-in-swish/9321/7 "2025-09-27T12:15:27Z")
It actually works without the schema line (the vega-lite format doesn’t requires it, it is just good practice). The vega-lite online editor help says this about the schema line: > URL to JSON schema for a Vega-Lite specification. Unless you have a reason to change this, use `[https://vega.github.io/schema/vega-lite/v6.json`]([Vega Editor](https://vega.github.io/editor/#/edited)). Setting the `$schema` property allows automatic validation and autocomplete in editors that support JSON schema. Should I remove it from the example ? ---
**Author:** ![kwon-young](https://yyz2.discourse-cdn.com/free1/user_avatar/swi-prolog.discourse.group/kwon-young/32/4841_2.png) [@kwon-young](https://swi-prolog.discourse.group/u/kwon-young)\ **Post date:** [September 30, 2025, 3:19pm UTC](https://swi-prolog.discourse.group/t/vega-lite-in-swish/9321/8 "2025-09-30T15:19:52Z")
We can now render [vega-lite graph in SWISH](https://swish.swi-prolog.org/example/vega.swinb) ! Thank you @jan for working on this with me 🙂 ---
**Author:** ![jan](https://yyz2.discourse-cdn.com/free1/user_avatar/swi-prolog.discourse.group/jan/32/4_2.png) [@jan](https://swi-prolog.discourse.group/u/jan)\ **Post date:** [September 30, 2025, 3:29pm UTC](https://swi-prolog.discourse.group/t/vega-lite-in-swish/9321/9 "2025-09-30T15:29:42Z")
> [@kwon-young](#): > > We can now render [vega-lite graph in SWISH](https://swish.swi-prolog.org/example/vega.swinb) ! Thanks to you! Note that if you try this, you may have to do a shift-reload to make sure to get the latest JavaScript. If the examples do not show up, your browser cache is the most likely culprit.