Create beautiful JavaScript charts with one line of Vue
npm install vue-chartkickCreate beautiful JavaScript charts with one line of Vue
Supports Chart.js, Google Charts, and Highcharts
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.
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.
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
`vue
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
`
Make your pages load super fast and stop worrying about timeouts. Give each chart its own endpoint.
`vue`
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, Highcharts, and Chart.js for more info.
To customize datasets in Chart.js, use:
`vue`
You can pass this option to individual series as well.
Use dynamic components to make the chart type dynamic:
`vue`
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 for more details.
To set options for all of your charts, use:
`javascript`
Chartkick.options = {
colors: ["#b00", "#666"]
}
Pass data as an array or object
`vue`
Times can be a Date or a string (strings are parsed)
`vue`
Data can also be a callback
`vue
function fetchData(success, fail) {
success({"Blueberry": 44, "Strawberry": 23})
// or fail("Data not available")
}
`
You can pass a few options with a series:
- namedata
- color
- dataset
- - Chart.js onlypoints
- - Chart.js onlycurve
- - Chart.js only
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`
Run
`sh`
npm install vue-chartkick chart.js
And add
`javascript
import VueChartkick from 'vue-chartkick'
import 'chartkick/chart.js'
app.use(VueChartkick)
`
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: "..."})
Run
`sh`
npm install vue-chartkick highcharts
And add
`javascript
import VueChartkick from 'vue-chartkick'
import 'chartkick/highcharts'
app.use(VueChartkick)
`
Include the charting library and the Chartkick library
`html`
And add
`javascript`
app.use(VueChartkick)
If more than one charting library is loaded, choose between them with:
`vue`
Options are google, highcharts, and chartjs
`vue
`
Vue Chartkick 1.0 adds support for Vue 3. Vue 3 requires you to specify plugins for each app.
`javascript`
Vue.use(Chartkick.use(Chart))
to
`javascript`
app.use(Chartkick.use(Chart))
For the no package manager install, Chartkick.js is no longer bundled, allowing you to update them independently. Include it manually before Vue Chartkick.
`html``
Finally, Vue Chartkick no longer uses custom logic to see if a re-render is necessary. See the reactivity docs for more details.
Everyone is encouraged to help improve this project. Here are a few ways you can help:
- Report bugs
- Fix bugs and submit pull requests
- 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