https://github.com/qingwei-li/laue

🖖📈 Modern charts for Vue 2.0
https://github.com/qingwei-li/laue

area bar chart charts line pie svg vue vuejs

Last synced: 2 months ago
JSON representation

🖖📈 Modern charts for Vue 2.0

• Host: GitHub
• URL: https://github.com/qingwei-li/laue
• Owner: QingWei-Li
• License: mit
• Created: 2018-03-30T07:35:20.000Z (about 7 years ago)
• Default Branch: master
• Last Pushed: 2023-01-06T12:34:07.000Z (over 2 years ago)
• Last Synced: 2024-10-29T21:59:03.441Z (8 months ago)
• Topics: area, bar, chart, charts, line, pie, svg, vue, vuejs
• Language: JavaScript
• Homepage: https://laue.js.org
• Size: 2 MB
• Stars: 263
• Watchers: 5
• Forks: 34
• Open Issues: 25
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • License: LICENSE

Awesome Lists containing this project

README

        






# Laue

[![Build Status](https://img.shields.io/travis/QingWei-Li/laue.svg?style=flat-square)](https://travis-ci.org/QingWei-Li/laue)

[![Coverage Status](https://img.shields.io/coveralls/QingWei-Li/laue.svg?style=flat-square)](https://coveralls.io/github/QingWei-Li/laue?branch=master)

[![npm](https://img.shields.io/npm/v/laue.svg?style=flat-square)](https://www.npmjs.com/package/laue)

![](http://img.badgesize.io/https://unpkg.com/laue?compression=gzip&label=gzip%20size&style=flat-square)

> 🖖📈 Modern charts for Vue.js

Documentation: https://laue.js.org

## Features

* It depends on several small submodules in [D3](//d3js.org), so it's very **reliable** and **lightweight**.

* The implementation for Vue.js, so it is **composable** and **supports SSR**.

## Installation

```shell

npm i laue

```

## Usage

```javascript

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](https://codepen.io/QingWei-Li/pen/EpOvNN)

```html



    

        

        

        

        

  



    new Vue({

        el: '#app',

        data: () => ({

            values: [

                { name: 'Page A', pv: 2000 },

                { name: 'Page B', pv: 3000 },

                { name: 'Page C', pv: 1200 }

            ]

        })

    })

```

## Inspired

* [Recharts](https://github.com/recharts/recharts)

* [Frappe Charts](https://github.com/frappe/charts)

## License

MIT