Create beautiful JavaScript charts with one line of Vue
Supports Chart.js, Google Charts, and Highcharts
Run
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
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
<line-chart :data="{'2021-01-01': 11, '2021-01-02': 6}"></line-chart>
Pie chart
<pie-chart :data="[['Blueberry', 44], ['Strawberry', 23]]"></pie-chart>
Column chart
<column-chart :data="[['Sun', 32], ['Mon', 46], ['Tue', 28]]"></column-chart>
Bar chart
<bar-chart :data="[['Work', 32], ['Play', 1492]]"></bar-chart>
Area chart
<area-chart :data="{'2021-01-01': 11, '2021-01-02': 6}"></area-chart>
Scatter chart
<scatter-chart :data="[[174.0, 80.0], [176.5, 82.3]]" xtitle="Size" ytitle="Population"></scatter-chart>
Geo chart - Google Charts
<geo-chart :data="[['United States', 44], ['Germany', 23], ['Brazil', 22]]"></geo-chart>
Timeline - Google Charts
<timeline :data="[['Washington', '1789-04-29', '1797-03-03'], ['Adams', '1797-03-03', '1801-03-03']]"></timeline>
Multiple series
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
<line-chart :data="data"></line-chart>
Data can be an array, object, callback, or URL.
<line-chart :data="[['2021-01-01', 2], ['2021-01-02', 3]]"></line-chart>
<line-chart :data="{'2021-01-01': 2, '2021-01-02': 3}"></line-chart>
function fetchData(success, fail) {
success({"2021-01-01": 2, "2021-01-02": 3})
// or fail("Data not available")
}
and
<line-chart :data="fetchData"></line-chart>
Make your pages load super fast and stop worrying about timeouts. Give each chart its own endpoint.
<line-chart data="/stocks"></line-chart>
Id, width, and height
<line-chart id="users-chart" width="800px" height="500px"></line-chart>
Min and max values
<line-chart :min="1000" :max="5000"></line-chart>
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
<line-chart xmin="2021-01-01" xmax="2022-01-01"></line-chart>
Colors
<line-chart :colors="['#b00', '#666']"></line-chart>
Stacked columns or bars
<column-chart :stacked="true"></column-chart>
Discrete axis
<line-chart :discrete="true"></line-chart>
Label (for single series)
<line-chart label="Value"></line-chart>
Axis titles
<line-chart xtitle="Time" ytitle="Population"></line-chart>
Straight lines between points instead of a curve
<line-chart :curve="false"></line-chart>
Show or hide legend
<line-chart :legend="true"></line-chart>
Specify legend position
<line-chart legend="bottom"></line-chart>
Donut chart
<pie-chart :donut="true"></pie-chart>
Prefix, useful for currency - Chart.js, Highcharts
<line-chart prefix="$"></line-chart>
Suffix, useful for percentages - Chart.js, Highcharts
<line-chart suffix="%"></line-chart>
Set a thousands separator - Chart.js, Highcharts
<line-chart thousands=","></line-chart>
Set a decimal separator - Chart.js, Highcharts
<line-chart decimal=","></line-chart>
Set significant digits - Chart.js, Highcharts
<line-chart :precision="3"></line-chart>
Set rounding - Chart.js, Highcharts
<line-chart :round="2"></line-chart>
Show insignificant zeros, useful for currency - Chart.js, Highcharts
<line-chart :round="2" :zeros="true"></line-chart>
Friendly byte sizes - Chart.js 2.8+
<line-chart :bytes="true"></line-chart>
Specify the message when the chart is loading
<line-chart loading="Loading..."></line-chart>
Specify the message when data is empty
<line-chart empty="No data"></line-chart>
Refresh data from a remote source every n
seconds
<line-chart :refresh="60"></line-chart>
You can pass options directly to the charting library with:
<line-chart :library="{backgroundColor: '#eee'}"></line-chart>
See the documentation for Google Charts, Highcharts, and Chart.js for more info.
To customize datasets in Chart.js, use:
<line-chart :dataset="{borderWidth: 10}"></line-chart>
You can pass this option to individual series as well.
Use dynamic components to make the chart type dynamic:
<component is="column-chart"></component>
While some of the examples use object or array literals in props for demonstration, this can lead to unnecessary re-renders.
<line-chart :library="{backgroundColor: '#eee'}"></line-chart>
Instead, use a data property:
<line-chart :library="library"></line-chart>
See this discussion for more details.
To set options for all of your charts, use:
Chartkick.options = {
colors: ["#b00", "#666"]
}
You can pass a few options with a series:
name
data
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.
<line-chart :download="true"></line-chart>
Set the filename
<line-chart download="boom"></line-chart>
Note: Safari will open the image in a new window instead of downloading.
Set the background color
<line-chart :download="{background: '#fff'}"></line-chart>
Run
npm install vue-chartkick chart.js
And add
import VueChartkick from 'vue-chartkick'
import 'chartkick/chart.js'
app.use(VueChartkick)
Run
npm install vue-chartkick
And add
import VueChartkick from 'vue-chartkick'
app.use(VueChartkick)
And include on the page
<script src="https://www.gstatic.com/charts/loader.js"></script>
To specify a language or Google Maps API key, use:
Chartkick.configure({language: "de", mapsApiKey: "..."})
Run
npm install vue-chartkick highcharts
And add
import VueChartkick from 'vue-chartkick'
import 'chartkick/highcharts'
app.use(VueChartkick)
Include the charting library and the Chartkick library
<script src="https://unpkg.com/chart.js@4.2.0/dist/chart.umd.js"></script>
<script src="https://unpkg.com/chartjs-adapter-date-fns@3.0.0/dist/chartjs-adapter-date-fns.bundle.js"></script>
<script src="https://unpkg.com/chartkick@5.0.0"></script>
<script src="https://unpkg.com/vue-chartkick@1.1.0"></script>
And add
app.use(VueChartkick)
If more than one charting library is loaded, choose between them with:
<line-chart adapter="google"></line-chart>
Options are google
, highcharts
, and chartjs
<div id="app">
<line-chart :data="chartData"></line-chart>
</div>
<script>
var app = Vue.createApp({
el: "#app",
data: {
chartData: [["Jan", 4], ["Feb", 2], ["Mar", 10], ["Apr", 5], ["May", 3]]
}
})
app.use(VueChartkick)
app.mount("#app")
</script>
View the changelog
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:
git clone https://github.com/ankane/vue-chartkick.git
cd vue-chartkick
npm install
npm run build