https://github.com/jscharting/jscharting-vuejs
Deprecated [2020-20-2] Official JSCharting Samples for Vue.js
https://github.com/jscharting/jscharting-vuejs
chart jscharting vuejs
Last synced: about 1 month ago
JSON representation
Deprecated [2020-20-2] Official JSCharting Samples for Vue.js
- Host: GitHub
- URL: https://github.com/jscharting/jscharting-vuejs
- Owner: jscharting
- Created: 2018-11-19T18:44:27.000Z (over 7 years ago)
- Default Branch: master
- Last Pushed: 2022-12-04T06:38:49.000Z (over 3 years ago)
- Last Synced: 2025-05-31T15:26:45.445Z (about 1 year ago)
- Topics: chart, jscharting, vuejs
- Language: JavaScript
- Homepage:
- Size: 464 KB
- Stars: 2
- Watchers: 1
- Forks: 0
- Open Issues: 10
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
## Deprecated [2020-20-2]
You can visit the [new home](https://github.com/jscharting/jscharting-vue) of the JSCharting Vue.js plugin page.
There you will find an npm package for the JSCharting plugin, detailed documentation, and an example project with several chart examples.
# JSCharting: Any Chart. Anywhere.
**JSCharting** is a JavaScript chart library for visualizing your data, providing resolution
independent results across all devices and platorms. Every JSCharting license includes the
full suite of 150+ advanced chart types, interactive stock charts and JSMapping at no additional charge.
## Official JSCharting examples for vuejs
This pack of examples demonstrate how to use JSCharting with vuejs framework.
### How to use
Install the necessary packages including JSCharting.
```console
npm install
```
Now you can build an application.
```console
npm run build
```
Also you can run dev server http://localhost:5000/
```console
npm run start
```
### How it works
After run build script /dist folder will be created which contains application files.
Index.html includes main (main.js) bundle file.
```html
```
Main.js contains the chart initialization code.
```javascript
var app = new Vue({
el: '#app',
data: {
containerClass: {
'chart-container': true
},
styles: [{
height: '500px'
}],
chartConfig: {
...
}
},
template: '
'
});
```