Nietzsche's Preposterous Moustache

    vue-chartjs
    TypeScript icon, indicating that this package has built-in type declarations

    4.1.0 • Public • Published

    vue-chartjs

    vue-chartjs logo

    vue-chartjs is a wrapper for Chart.js in vue. You can easily create reuseable chart components.

    Supports Chart.js v3 and v2.

    npm version codecov Build Status Package Quality npm Gitter chat license CDNJS version Known Vulnerabilities Donate ko-fi


    Install   •   How to use   •   Docs   •   Slack   •   Stack Overflow

    Install

    Install this library with peer dependencies:

    pnpm add vue-chartjs chart.js
    # or
    yarn add vue-chartjs chart.js
    # or
    npm i vue-chartjs chart.js

    We recommend using chart.js@^3.0.0.


    Need an API to fetch data? Consider Cube, an open-source API for data apps.


    supported by Cube

    How to use

    This package works with version 2.x and 3.x of Vue.

    Import the component.

    import { Bar } from 'vue-chartjs'

    For Vue 2 projects, you need to import from vue-chartjs/legacy.

    import { Bar } from 'vue-chartjs/legacy'

    Just create your own component.

    <template>
      <Bar
        :chart-options="chartOptions"
        :chart-data="chartData"
        :chart-id="chartId"
        :dataset-id-key="datasetIdKey"
        :plugins="plugins"
        :css-classes="cssClasses"
        :styles="styles"
        :width="width"
        :height="height"
      />
    </template>
    
    <script>
    import { Bar } from 'vue-chartjs'
    import { Chart as ChartJS, Title, Tooltip, Legend, BarElement, CategoryScale, LinearScale } from 'chart.js'
    
    ChartJS.register(Title, Tooltip, Legend, BarElement, CategoryScale, LinearScale)
    
    export default {
      name: 'BarChart',
      components: { Bar },
      props: {
        chartId: {
          type: String,
          default: 'bar-chart'
        },
        datasetIdKey: {
          type: String,
          default: 'label'
        },
        width: {
          type: Number,
          default: 400
        },
        height: {
          type: Number,
          default: 400
        },
        cssClasses: {
          default: '',
          type: String
        },
        styles: {
          type: Object,
          default: () => {}
        },
        plugins: {
          type: Array,
          default: () => []
        }
      },
      data() {
        return {
          chartData: {
            labels: [ 'January', 'February', 'March' ],
            datasets: [ { data: [40, 20, 12] } ]
          },
          chartOptions: {
            responsive: true
          }
        }
      }
    }
    </script>

    or in TypeScript

    // BarChart.ts
    import { defineComponent, h, PropType } from 'vue'
    import { Bar } from 'vue-chartjs'
    import { Chart as ChartJS, Title, Tooltip, Legend, BarElement, CategoryScale, LinearScale, PluginOptionsByType } from 'chart.js'
    
    ChartJS.register(Title, Tooltip, Legend, BarElement, CategoryScale, LinearScale)
    
    export default defineComponent({
      name: 'BarChart',
      components: { Bar },
      props: {
        chartId: {
          type: String,
          default: 'bar-chart'
        },
        width: {
          type: Number,
          default: 400
        },
        height: {
          type: Number,
          default: 400
        },
        cssClasses: {
          default: '',
          type: String
        },
        styles: {
          type: Object as PropType<Partial<CSSStyleDeclaration>>,
          default: () => {}
        },
        plugins: {
          type: Array as PropType<Plugin<'bar'>[]>,
          default: () => []
        }
      },
      setup(props) {
        const chartData = {
          labels: [ 'January', 'February', 'March' ],
          datasets: [ { data: [40, 20, 12] } ]
        }
    
        const chartOptions = { responsive: true }
    
        return () =>
          h(Bar, {
            chartData,
            chartOptions,
            chartId: props.chartId,
            width: props.width,
            height: props.height,
            cssClasses: props.cssClasses,
            styles: props.styles,
            plugins: props.plugins
          })
      }
    })

    Use it in your vue app

    <template>
      <BarChart />
    </template>
    
    <script>
    import BarChart from 'path/to/component/BarChart'
    
    export default {
      name: 'App',
      components: { BarChart }
    }
    </script>

    Docs

    Build Setup

    # install dependencies
    pnpm install
    
    # build for production with minification
    pnpm build
    
    # run unit tests
    pnpm unit
    
    # run all tests
    pnpm test

    Contributing

    1. Fork it ( https://github.com/apertureless/vue-chartjs/fork )
    2. Create your feature branch (git checkout -b my-new-feature)
    3. Commit your changes (git commit -am 'Add some feature')
    4. Push to the branch (git push origin my-new-feature)
    5. Create a new Pull Request

    License

    This software is distributed under MIT license.

    Buy Me A Coffee

    Install

    npm i vue-chartjs

    DownloadsWeekly Downloads

    221,364

    Version

    4.1.0

    License

    MIT

    Unpacked Size

    148 kB

    Total Files

    21

    Last publish

    Collaborators

    • apertureless