Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/ankane/vue-chartkick
Create beautiful JavaScript charts with one line of Vue
https://github.com/ankane/vue-chartkick
Last synced: 13 days ago
JSON representation
Create beautiful JavaScript charts with one line of Vue
- Host: GitHub
- URL: https://github.com/ankane/vue-chartkick
- Owner: ankane
- License: mit
- Created: 2016-10-30T22:04:13.000Z (about 8 years ago)
- Default Branch: master
- Last Pushed: 2024-06-10T04:24:44.000Z (5 months ago)
- Last Synced: 2024-10-15T06:04:53.985Z (20 days ago)
- Language: JavaScript
- Homepage: https://chartkick.com/vue
- Size: 99.6 KB
- Stars: 750
- Watchers: 10
- Forks: 74
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Contributing: CONTRIBUTING.md
- License: LICENSE.txt
Awesome Lists containing this project
- awesome-github-vue - vue-chartkick - VueJS一行代码实现优美图表 (UI组件)
- awesome-github-vue - vue-chartkick - VueJS一行代码实现优美图表 (UI组件)
- awesome - vue-chartkick - VueJS一行代码实现优美图表 (UI组件)
- awesome-vue - vue-chartkick - chartkick?style=social) - VueJS一行代码实现优美图表 (UI组件)
README
# Vue Chartkick
Create beautiful JavaScript charts with one line of Vue
[See it in action](https://www.chartkick.com/vue)
Supports [Chart.js](https://www.chartjs.org/), [Google Charts](https://developers.google.com/chart/), and [Highcharts](https://www.highcharts.com/)
[](https://github.com/ankane/vue-chartkick/actions)
## Quick Start
Run
```sh
npm install vue-chartkick chart.js
```
The latest version works with Vue 3. For Vue 2, use version 0.6.1 and [this readme](https://github.com/ankane/vue-chartkick/blob/vue2-docs/README.md).
And add it to your app
```javascript
import VueChartkick from 'vue-chartkick'
import 'chartkick/chart.js'
app.use(VueChartkick)
```
This sets up Chartkick with Chart.js. For other charting libraries, see [detailed instructions](#installation).
## Charts
Line chart
```vue
```
Pie chart
```vue
```
Column chart
```vue
```
Bar chart
```vue
```
Area chart
```vue
```
Scatter chart
```vue
```
Geo chart - *Google Charts*
```vue
```
Timeline - *Google Charts*
```vue
```
Multiple series
```javascript
data = [
{name: 'Workout', data: {'2021-01-01': 3, '2021-01-02': 4}},
{name: 'Call parents', data: {'2021-01-01': 5, '2021-01-02': 3}}
];
```
and
```vue
```
## Data
Data can be an array, object, callback, or URL.
#### Array
```vue
```
#### Object
```vue
```
#### Callback
```javascript
function fetchData(success, fail) {
success({"2021-01-01": 2, "2021-01-02": 3})
// or fail("Data not available")
}
```
and
```vue
```
#### URL
Make your pages load super fast and stop worrying about timeouts. Give each chart its own endpoint.
```vue
```
## Options
Id, width, and height
```vue
```
Min and max values
```vue
```
`min` defaults to 0 for charts with non-negative values. Use `null` to let the charting library decide.
Min and max for x-axis - *Chart.js*
```vue
```
Colors
```vue
```
Stacked columns or bars
```vue
```
Discrete axis
```vue
```
Label (for single series)
```vue
```
Axis titles
```vue
```
Straight lines between points instead of a curve
```vue
```
Show or hide legend
```vue
```
Specify legend position
```vue
```
Donut chart
```vue
```
Prefix, useful for currency - *Chart.js, Highcharts*
```vue
```
Suffix, useful for percentages - *Chart.js, Highcharts*
```vue
```
Set a thousands separator - *Chart.js, Highcharts*
```vue
```
Set a decimal separator - *Chart.js, Highcharts*
```vue
```
Set significant digits - *Chart.js, Highcharts*
```vue
```
Set rounding - *Chart.js, Highcharts*
```vue
```
Show insignificant zeros, useful for currency - *Chart.js, Highcharts*
```vue
```
Friendly byte sizes - *Chart.js 2.8+*
```vue
```
Specify the message when the chart is loading
```vue
```
Specify the message when data is empty
```vue
```
Refresh data from a remote source every `n` seconds
```vue
```
You can pass options directly to the charting library with:
```vue
```
See the documentation for [Google Charts](https://developers.google.com/chart/interactive/docs/gallery), [Highcharts](https://api.highcharts.com/highcharts), and [Chart.js](https://www.chartjs.org/docs/) for more info.
To customize datasets in Chart.js, use:
```vue
```
You can pass this option to individual series as well.
Use [dynamic components](https://vuejs.org/v2/guide/components.html#Dynamic-Components) to make the chart type dynamic:
```vue
```
### Reactivity
While some of the examples use object or array literals in props for demonstration, this can lead to unnecessary re-renders.
```vue
```
Instead, use a data property:
```vue
```
See [this discussion](https://github.com/vuejs/vue/issues/4060) for more details.
### Global Options
To set options for all of your charts, use:
```javascript
Chartkick.options = {
colors: ["#b00", "#666"]
}
```
### Multiple Series
You can pass a few options with a series:
- `name`
- `data`
- `color`
- `dataset` - *Chart.js only*
- `points` - *Chart.js only*
- `curve` - *Chart.js only*
### Download Charts
*Chart.js only*
Give users the ability to download charts. It all happens in the browser - no server-side code needed.
```vue
```
Set the filename
```vue
```
**Note:** Safari will open the image in a new window instead of downloading.
Set the background color
```vue
```
## Installation
### Chart.js
Run
```sh
npm install vue-chartkick chart.js
```
And add
```javascript
import VueChartkick from 'vue-chartkick'
import 'chartkick/chart.js'
app.use(VueChartkick)
```
### Google Charts
Run
```sh
npm install vue-chartkick
```
And add
```javascript
import VueChartkick from 'vue-chartkick'
app.use(VueChartkick)
```
And include on the page
```html
```
To specify a language or Google Maps API key, use:
```javascript
Chartkick.configure({language: "de", mapsApiKey: "..."})
```
### Highcharts
Run
```sh
npm install vue-chartkick highcharts
```
And add
```javascript
import VueChartkick from 'vue-chartkick'
import 'chartkick/highcharts'
app.use(VueChartkick)
```
### No Package Manager
Include the charting library and the Chartkick library
```html
```
And add
```javascript
app.use(VueChartkick)
```
### Multiple Libraries
If more than one charting library is loaded, choose between them with:
```vue
```
Options are `google`, `highcharts`, and `chartjs`
## Example
```vue
var app = Vue.createApp({
el: "#app",
data: {
chartData: [["Jan", 4], ["Feb", 2], ["Mar", 10], ["Apr", 5], ["May", 3]]
}
})
app.use(VueChartkick)
app.mount("#app")
```
## History
View the [changelog](https://github.com/ankane/vue-chartkick/blob/master/CHANGELOG.md)
## Contributing
Everyone is encouraged to help improve this project. Here are a few ways you can help:
- [Report bugs](https://github.com/ankane/vue-chartkick/issues)
- Fix bugs and [submit pull requests](https://github.com/ankane/vue-chartkick/pulls)
- Write, clarify, or fix documentation
- Suggest or add new features
To get started with development, run:
```sh
git clone https://github.com/ankane/vue-chartkick.git
cd vue-chartkick
npm install
npm run build
```