bbonnin / Vue Morris
Licence: mit
VueJS component wrapping Morris.js
Stars: ✭ 212
Programming Languages
javascript
184084 projects - #8 most used programming language
Projects that are alternatives of or similar to Vue Morris
Vis Graph3d
📊 Create interactive, animated 3d graphs. Surfaces, lines, dots and block styling out of the box.
Stars: ✭ 129 (-39.15%)
Mutual labels: hacktoberfest, chart
Fl chart
A powerful Flutter chart library, currently supporting Line Chart, Bar Chart, Pie Chart, Scatter Chart and Radar Chart.
Stars: ✭ 3,882 (+1731.13%)
Mutual labels: hacktoberfest, chart
Chart.js
Simple HTML5 Charts using the <canvas> tag
Stars: ✭ 55,646 (+26148.11%)
Mutual labels: hacktoberfest, chart
Rollup Plugin Visualizer
📈⚖️ Visuallize your bundle
Stars: ✭ 405 (+91.04%)
Mutual labels: hacktoberfest, chart
Arcchartview
Arc Chart View (Draw Creative Statistic Arc Charts)
Stars: ✭ 96 (-54.72%)
Mutual labels: hacktoberfest, chart
Vis Timeline
📈 Create a fully customizable, interactive timelines and 2d-graphs with items and ranges.
Stars: ✭ 654 (+208.49%)
Mutual labels: hacktoberfest, chart
Ngx Charts
📊 Declarative Charting Framework for Angular
Stars: ✭ 4,057 (+1813.68%)
Mutual labels: hacktoberfest, chart
Npmcharts.com
Compare npm package downloads over time
Stars: ✭ 129 (-39.15%)
Mutual labels: hacktoberfest, chart
V Chart Plugin
Easily bind a chart to the data stored in your Vue.js components.
Stars: ✭ 188 (-11.32%)
Mutual labels: hacktoberfest, chart
Bookmarks
🔖 +4.3K awesome resources for geeks and software crafters 🍺
Stars: ✭ 210 (-0.94%)
Mutual labels: hacktoberfest
Seo
SEO utilities including a unique field type, sitemap & redirect manager
Stars: ✭ 210 (-0.94%)
Mutual labels: hacktoberfest
Ach
ACH implements a reader, writer, and validator for Automated Clearing House (ACH) files. The HTTP server is available in a Docker image and the Go package is available.
Stars: ✭ 210 (-0.94%)
Mutual labels: hacktoberfest
Teku
Java Implementation of the Ethereum 2.0 Beacon Chain
Stars: ✭ 209 (-1.42%)
Mutual labels: hacktoberfest
Idiomatic Rust
🦀 A peer-reviewed collection of articles/talks/repos which teach concise, idiomatic Rust.
Stars: ✭ 3,130 (+1376.42%)
Mutual labels: hacktoberfest
Sbuttons
💡 Simple buttons you can use easily for your next project.
Stars: ✭ 207 (-2.36%)
Mutual labels: hacktoberfest
Pytest Qt
pytest plugin for Qt (PyQt4, PyQt5 and PySide) application testing
Stars: ✭ 210 (-0.94%)
Mutual labels: hacktoberfest
Oshi
Native Operating System and Hardware Information
Stars: ✭ 2,876 (+1256.6%)
Mutual labels: hacktoberfest
vue-morris
Vue.js components wrapping Morris.js lib
See http://morrisjs.github.io/morris.js/ for documentation
Depends on Vue.js v2.1.0+
Install
Use npm
npm install vue-morris --save
Do not forget to declare jQuery in your package.json
and, 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'
}
},
Examples
For a complete example, see files in examples
directory or the project: https://github.com/bbonnin/vue-morris-example.
- Import the component
// Do not forget to import raphael
import Raphael from 'raphael/raphael'
global.Raphael = Raphael
import 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
<donut-chart
id="donut"
:data="donutData"
colors='[ "#FF6384", "#36A2EB", "#FFCE56" ]'
resize="true">
</donut-chart>
Build Setup
# install dependencies
npm install
# serve with hot reload at localhost:8080
npm run dev
# build for production with minification
npm run build
Note that the project description data, including the texts, logos, images, and/or trademarks,
for each open source project belongs to its rightful owner.
If you wish to add or remove any projects, please contact us at [email protected].