Create beautiful JavaScript charts with one line of Vue
Supports Chart.js, Google Charts, and Highcharts
Run
npm install vue-chartkick chart.jsThe 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:
namedatacolordataset- 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.jsAnd add
import VueChartkick from 'vue-chartkick'
import 'chartkick/chart.js'
app.use(VueChartkick)Run
npm install vue-chartkickAnd 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 highchartsAnd 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/[email protected]/dist/chart.umd.js"></script>
<script src="https://unpkg.com/[email protected]/dist/chartjs-adapter-date-fns.bundle.js"></script>
<script src="https://unpkg.com/[email protected]"></script>
<script src="https://unpkg.com/[email protected]"></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
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent