Laue

🖖📈 Modern charts for Vue.js

Documentation: https://laue.js.org

Features

• It depends on several small submodules in D3, so it's very reliable and lightweight.
• The implementation for Vue.js, so it is composable and supports SSR.

Installation

npm i laue

Usage

import Vue from 'vue';
import { Laue } from 'laue';

Vue.use(Laue);

// On demand
import { Cartesian, Line } from 'laue';

Vue.component(Cartesian.name, Cartesian);
Vue.component(Line.name, Line);

Demo

A dead simple example

<div id="app">
    <la-cartesian :width="300" :height="150" :data="values">
        <la-line prop="pv"></la-line>
        <la-y-axis></la-y-axis>
        <la-x-axis prop="name"></la-x-axis>
        <la-tooltip></la-tooltip>
  </la-cartesian>
</div>

<script src="https://github.com/QingWei-Li/laue/raw/master//unpkg.com/vue"></script>
<script src="https://github.com/QingWei-Li/laue/raw/master//unpkg.com/laue"></script>
<script>
    new Vue({
        el: '#app',
        data: () => ({
            values: [
                { name: 'Page A', pv: 2000 },
                { name: 'Page B', pv: 3000 },
                { name: 'Page C', pv: 1200 }
            ]
        })
    })
</script>

Inspired

• Recharts
• Frappe Charts

License

MIT