Vuesalize

Visit our interactive docs page!

What's the point?

Building interactive visualizations on the web can be hard, and it can be even harder when you would like to leverage
existing visualization libraries inside a Vue.js project. The goal of Vuesalize is to simplify this process by
providing a set of chart components (and a couple other components) that are commonly used in building interactive visualizations
on the web. The charts are built using a combination of Vue.js
and D3.js. The main rationale for this approach is to fully embrace the Vue paradigm and move the
SVG definitions to the template (HTML), which allows Vue to handle creating and removing elements on the page.
This is analogous to the "enter/update/exit" strategy used in D3 but specifically taking advantage of the virtual DOM.
By building charts where the SVG is defined in Vue's template, we can not only send down props to update the chart, but
can also emit events on interactions (e.g. click, mousover, etc.) and offer scoped slots for custom tooltips!

Installation

::: warning
Starting with version 1.0.1, Vuesalize will only support Vue 3. If you'd like to use Vuesalize with Vue 2, use the last
available version 0.2.0.
:::

The library is currently available on npm, and
it is possible to use it with Vue CLI (recommended) or directly with the CDN version in a


`

$3

It is quite simple to get started with the CDN. The vuesalize javascript and css files need to be linked (lines 5 and
7 below). Then after creating an app instance app = createApp({...}), you can call app.use(Vuesalize) to install the
plugin. As with other packages, it is also necessary to link the official Vue 3 package (line 6) before vuesalize.

`html














``

Examples of how each of the chart components can be used can be found in the sections below. Additionally, the SFC
component templates can be retrieved from github