1. vue-bulma-chartjs
Chartjs component for Vue Bulma
vue-bulma-chartjs
Package: vue-bulma-chartjs
Created by: vue-bulma
Last modified: Tue, 28 Jun 2022 19:05:19 GMT
Version: 1.0.5
License: MIT
Downloads: 574
Repository: https://github.com/vue-bulma/chartjs

Install

npm install vue-bulma-chartjs
yarn add vue-bulma-chartjs

Chartjs

Chartjs component is based on chart.js for Vue Bulma.

Installation

$ npm install vue-bulma-chartjs

Examples

<template>
  <chart :type="'pie'" :data="data" :options="options"></chart>
</template>

<script>
import Chart from 'vue-bulma-chartjs'

export default {
  components: {
    Chart
  },

  data () {
    return {
      data: {
        labels: ['Sleeping', 'Designing', 'Coding', 'Cycling'],
          datasets: [{
          data: [20, 40, 5, 35],
          backgroundColor: [
            '#1fc8db',
            '#fce473',
            '#42afe3',
            '#ed6c63',
            '#97cd76'
          ]
        }]
      },
      options: {
        segmentShowStroke: false
      }
    }
  }
}
</script>

Badges



fundon.me  · 
GitHub @fundon  · 
Twitter @_fundon

Dependencies

RELATED POST

Enhancing Vue.js Development: Harnessing the Potential of Vue-Loader

Enhancing Vue.js Development: Harnessing the Potential of Vue-Loader

Simplify Data Validation in Vue.js: A Step-by-Step Guide to Using Regex

Simplify Data Validation in Vue.js: A Step-by-Step Guide to Using Regex

Troubleshooting Made Easy: Common Issues and Solutions with vue-loader Without vue-cli

Troubleshooting Made Easy: Common Issues and Solutions with vue-loader Without vue-cli

Optimizing Webpack 4 with Vue CLI 3: Disabling the Cache-Loader

Optimizing Webpack 4 with Vue CLI 3: Disabling the Cache-Loader

Step-by-Step Guide: How to Add a Function to Your Vuex Plugin

Step-by-Step Guide: How to Add a Function to Your Vuex Plugin