manV / vue-d3-snake-chart

A snake chart(90deg rotated line chart) component for vue, using D3

vue-d3-snake-chart

A Vue.js component for Snake Chart(90deg rotated line chart basically)

Generated using vue-cli-template-library.

Installation

npm install vue-d3-snake-chart

vue-d3-snake-chart can be used as a module in both CommonJS and ES modular environments.

When in non-modular environment, vue-d3-snake-chart will register all the components to vue by itself.

ES6

//
// You can register a component manually
//
import { SnakeChart } from 'vue-d3-snake-chart';

export default {
  ...
  components: {
    SnakeChart
  },
  ...
};

//
// or register the whole module with vue
//
import ModuleLibrary from 'vue-d3-snake-chart';

// Install this library
Vue.use(ModuleLibrary);

CommonJS

//
// You can register a component manually
//
var Vue = require('vue');
var ModuleLibrary = require('vue-d3-snake-chart');

var YourComponent = Vue.extend({
  ...
  components: {
    'snake-chart': ModuleLibrary.SnakeChart
  },
  ...
});

//
// or register the whole module with vue
//
var Vue = require('vue');
var ModuleLibrary = require('vue-d3-snake-chart');

// Install this library
Vue.use(ModuleLibrary);

Browser

<script src="path/to/vue/vue.min.js"></script>
<script src="path/to/vue-d3-snake-chart/dist/vue-d3-snake-chart.min.js"></script>
<!-- Components are registered globally -->

After that, you can use it in your templates:

<snake-chart></snake-chart>

Changelog

See the GitHub release history.