VueJS component wrapping Morris.js
Vue.js components wrapping Morris.js lib
See http://morrisjs.github.io/morris.js/ for documentation
Depends on Vue.js v2.1.0+
Use npm
npm install vue-morris --save
Do not forget to declare jQuery in your
package.jsonand, if you are using Webpack, you should have something like that in your
webpack.config.js
resolve: { alias: { 'vue$': 'vue/dist/vue.common.js', 'jquery': 'jquery/src/jquery.js' } },
For a complete example, see files in
examplesdirectory or the project: https://github.com/bbonnin/vue-morris-example.
// Do not forget to import raphael import Raphael from 'raphael/raphael' global.Raphael = Raphaelimport Vue from 'vue' import { DonutChart } from 'vue-morris'
new Vue({ el: '#app',
data: { donutData: [ { label: 'Red', value: 300 }, { label: 'Blue', value: 50 }, { label: 'Yellow', value: 100 } ],
components: { DonutChart, BarChart, LineChart, AreaChart
} })
Use the component in html
html
Bar chart
Line chart
Area chart
Donut chart
# install dependencies npm installserve with hot reload at localhost:8080
npm run dev
build for production with minification
npm run build