vue-charts

Google Charts component for Vue.js

Downloads in past

Stats

StarsIssuesVersionUpdatedCreatedSize
vue-charts
194210.2.16 years ago7 years agoMinified + gzip package size for vue-charts in KB

Readme

vue-charts
Version Status js-standard-style License
Google Charts plugin for Vue.js

Demo

Installation

npm install --save-dev vue-charts

Usage

Vue.use(VueCharts)
<!-- Props can be literal, or dynamic (like they are here) -->
<vue-chart
    :chart-type="chartType"
    :columns="columns"
    :rows="rows"
    :options="options"
></vue-chart>

Props

<thead>
    <tr>
        <th width="160">Name</th>
        <th width="160">Default</th>
        <th width="100">Type</th>
        <th>Description</th>
    </tr>
</thead>
<tbody>
    <tr>
        <td>packages</td>
        <td><code>['corechart']</code></td>
        <td>Array</td>
        <td>Google Chart Packages to load.</td>
    </tr>
    <tr>
        <td>version</td>
        <td><code>current</code></td>
        <td>String</td>
        <td>Google Chart Version to load.</td>
    </tr>
    <tr>
        <td>chart-type</td>
        <td><code>LineChart</code></td>
        <td>String</td>
        <td>The type of chart to create.</td>
    </tr>
    <tr>
        <td>columns</td>
        <td><em>none, required</em></td>
        <td>Array</td>
        <td>Required. Chart columns.</td>
    </tr>
    <tr>
        <td>rows</td>
        <td><em>none</em></td>
        <td>Array</td>
        <td>Chart rows.</td>
    </tr>
    <tr>
        <td>chart-events</td>
        <td><em>none</em></td>
        <td>Object</td>
        <td><a href="https://developers.google.com/chart/interactive/docs/events" target="_blank">Google Charts Events</a>. See <a href="https://haydenbbickerton.github.io/vue-charts/events.html" target="_blank">Events Example</a></td>
    </tr>
    <tr>
        <td>options</td>
        <td><em>none</em></td>
        <td>Object</td>
        <td><a href="http://developers.google.com/chart/interactive/docs/customizing_charts" target="_blank">Google Charts Options</a></td>
    </tr>
</tbody>
Credits
This plugin is heavily based off of:
License
MIT