Skip to content
master
Go to file
Code

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
 
 
 
 
 
 
 
 
 
 
src
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

README.md

Laue

Build Status Coverage Status npm

πŸ––πŸ“ˆ 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="//unpkg.com/vue"></script>
<script src="//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

License

MIT

You can’t perform that action at this time.