vue-c3js is a set of Vue components for creating charts easily, powered by c3js.
For the time being, many features of c3js are not supported. Feature requests are welcome.
npm install --save https://github.com/andreas2510/vue-c3js.gitImport the module in your main script.
import VueC3Js from 'vue-c3js'
Vue.use(VueC3Js)Then use it within your HTML or vue template. At the very least, you need to specify the id of the component and also provide the chart data through one of the following props: columns, rows or json.
// In you script/vue template.
var columns = [
['data1', 30, 20, 50, 40, 60, 50],
['data2', 200, 130, 90, 240, 130, 220],
['data3', 300, 200, 160, 400, 250, 250],
['data4', 200, 130, 90, 240, 130, 220],
['data5', 130, 120, 150, 140, 160, 150],
['data6', 90, 70, 20, 50, 60, 120],
]<!-- In your HTML/Vue template -->
<c3-bar-chart id="mychart" :columns="columns"><template>
<div id="app">
<p>Welcome to your Vue.js app!</p>
<c3-bar-chart id="mychart" :columns="columns">
</div>
</template>
<script>
export default {
name: 'MainApp',
data: {
columns = [
['data1', 30, 20, 50, 40, 60, 50],
['data2', 200, 130, 90, 240, 130, 220],
['data3', 300, 200, 160, 400, 250, 250],
['data4', 200, 130, 90, 240, 130, 220],
['data5', 130, 120, 150, 140, 160, 150],
['data6', 90, 70, 20, 50, 60, 120],
]
}
}
</script>The idea is to pass configuration options to c3js through props. c3js has many options, not all of them are supported yet.
| Prop Name | Type | Description | c3js docs |
|---|---|---|---|
| id | String Required |
A string by which to identify the component. | bindto |
| width | Number |
The widht od the chart. | size.width |
| height | Number |
The widht od the chart. | size.height |
| paddingTop | Number |
paddingTop. | padding.top |
| paddingRight | Number |
paddingRight. | padding.right |
| paddingBottom | Number |
paddingBottom. | padding.bottom |
| paddingLeft | Number |
paddingLeft. | padding.left |
| colorPattern | Array |
colorPattern. | color.pattern |
| disableInteraction | Boolean |
disableInteraction. | interaction.enabled |
| transitionDuration | Number |
transitionDuration. | transition.duration |
c3js events are passed through vue-c3js as standard vue events, which you can listen to in your script.
| Event Name | Description | c3js docs |
|---|---|---|
| oninit | oninit. | oninit |
| onrendered | onrendered. | onrendered |
| onmouseover | onmouseover. | onmouseover |
| onmouseout | onmouseout. | onmouseout |
| onresize | onresize. | onresize |
| onresized | onresized. | onresized |
| Event Name | Description | c3js docs |
|---|---|---|
| onclick | onclick. | data.onclick |
| onmouseover | onmouseover. | data.onmouseover |
| onmouseout | onmouseout. | data.onmouseout |
| Event Name | Description | c3js docs |
|---|---|---|
| legend-onclick | legend-onclick. | legend.item.onclick |
| legend-onmouseover | legend-onmouseover. | legend.item.onmouseover |
| legend-onmouseout | legend-onmouseout. | legend.item.onmouseout |
| Event Name | Description | c3js docs |
|---|---|---|
| onzoom | onzoom. | zoom.onzoom |
| onzoomstart | onzoomstart. | zoom.onzoomstart |
| onzoomend | onzoomend. | zoom.onzoomend |
Id (String - Required)
<c3-bar-chart id="mychart">Size (width and height)
<c3-bar-chart id="mychart" :rows="rows" width="480" height="320">Padding (top, right, bottom, left)
<c3-bar-chart id="mychart" :rows="rows" padding-top="50" padding-right="50" padding-bottom="50" padding-left="50">Color pattern (Array)
<c3-bar-chart id="mychart" :rows="rows" :color-pattern="['#1f77b4', '#aec7e8']">Set duration of transition (in milliseconds) for chart animation.
<c3-bar-chart id="mychart" :rows="rows" transition-duration="1500">...
...
...
...
...
...
...
...
...
...
...
...