vue-chartjs | 📊 Vue.js wrapper for Chart.js | Chart library

 by   apertureless TypeScript Version: v5.2.0 License: MIT

kandi X-RAY | vue-chartjs Summary

kandi X-RAY | vue-chartjs Summary

vue-chartjs is a TypeScript library typically used in User Interface, Chart, Vue, D3 applications. vue-chartjs has no vulnerabilities, it has a Permissive License and it has medium support. However vue-chartjs has 1 bugs. You can download it from GitHub.

📊 Vue.js wrapper for Chart.js

            kandi-support Support

              vue-chartjs has a medium active ecosystem.
              It has 5142 star(s) with 793 fork(s). There are 70 watchers for this library.
              It had no major release in the last 12 months.
              There are 14 open issues and 615 have been closed. On average issues are closed in 65 days. There are 7 open pull requests and 0 closed requests.
              It has a neutral sentiment in the developer community.
              The latest version of vue-chartjs is v5.2.0

            kandi-Quality Quality

              vue-chartjs has 1 bugs (0 blocker, 0 critical, 1 major, 0 minor) and 0 code smells.

            kandi-Security Security

              vue-chartjs has no vulnerabilities reported, and its dependent libraries have no vulnerabilities reported.
              vue-chartjs code analysis shows 0 unresolved vulnerabilities.
              There are 0 security hotspots that need review.

            kandi-License License

              vue-chartjs is licensed under the MIT License. This license is Permissive.
              Permissive licenses have the least restrictions, and you can use them in most projects.

            kandi-Reuse Reuse

              vue-chartjs releases are available to install and integrate.
              Installation instructions, examples and code snippets are available.
              vue-chartjs saves you 4 person hours of effort in developing the same functionality from scratch.
              It has 12 lines of code, 0 functions and 48 files.
              It has low code complexity. Code complexity directly impacts maintainability of the code.

            Top functions reviewed by kandi - BETA

            kandi has reviewed vue-chartjs and discovered the below as its top functions. This is intended to give you an instant insight into vue-chartjs implemented functionality, and help decide if they suit your requirements.
            • Generate the chart data
            Get all kandi verified functions for this library.

            vue-chartjs Key Features

            No Key Features are available at this moment for vue-chartjs.

            vue-chartjs Examples and Code Snippets

            No Code Snippets are available at this moment for vue-chartjs.

            Community Discussions


            How to hide Chart.js legend in Vue?
            Asked 2022-Mar-29 at 08:22

            I'm using Vue Chart.js to create charts in my projects. I tried to hide the legend, but it doesn't seem like it recognizes my display:false command. I tried to use the example they offered on their github repository. The chart-data get loaded properly. Am I doing something wrong? (I use Vue 2).



            Answered 2022-Mar-29 at 08:22

            legend is a plugin for charts, so it will be under the plugins in options.



            ERROR in ./ordenesPago.js Module not found: Error: Can't resolve 'vue-confirm-dialog' in '/resources/js/administracion'
            Asked 2022-Mar-26 at 09:24

            I cloned a repo from git, and install all the dependences needed, but when runing npm run dev ai got this error for three files:

            ERROR in ./resources/js/administracion/ordenesPago.js Module not found: Error: Can't resolve 'vue-confirm-dialog' in '/Users/davegomez/Desktop/Arco/arco/sistema-arco-v2.0/resources/js/administracion' @ ./resources/js/administracion/ordenesPago.js 3:0-50 7:8-24 8:36-52 @ multi ./resources/js/administracion/ordenesPago.js

            the strangest part is that I have already 'vue-confirm-dialog' installed:

            This is my Package.json



            Answered 2022-Mar-26 at 09:24

            I had the same problem since the new Version 1.1.0 came out 7 days ago. It just set back the version to 1.0.1 again and it worked. I dont know if there is something wrong with their new release.



            Passing data from flask to echart using axios
            Asked 2022-Mar-12 at 14:55

            I am trying to pass the data I get from the backend to echarts using axios but I am not having much luck. Here is my LineChart.js file



            Answered 2022-Mar-12 at 14:55

            First you can't mutate a props. So you can't do = .... If you check your browser inspector you will see an error relative to the fact that you can't modify a props.

            You have to create a state and change the state when you receive the axios response :



            Line segment styling in Vue-chartJS
            Asked 2022-Feb-16 at 13:02

            I am trying to render a chart in VueJS using ChartJS and the Vue-chartJS wrapper. What I need is to style a specific line segment in a perticular manner(e.g if the value is not available, the line segment will be dashed/ a different color). I have looked over at chart.js documentation which states:



            Answered 2022-Feb-16 at 13:02

            Line segment styling is only available in Chart.js version 3. So to use it you will either need to ditch the vue wrapper and use chart.js barebone or you will need to switch to a wrapper that support chart.js V3 like vue-chart-3.

            Keep in mind that chart.js V3 has some major breaking changes from V2 so you will need to rewrite you code. For more info about this you can read the migration guide.

            If you want to keep using V2 of chart.js I suggest you read the V2 docs and not the V3 version



            Vue 3: Module '"../../node_modules/vue/dist/vue"' has no exported member
            Asked 2022-Jan-24 at 08:38

            After updating my npm packages, some of the imports from the 'vue' module started showing errors:

            TS2305: Module '"../../node_modules/vue/dist/vue"' has no exported member 'X'

            where X is nextTick, onMounted, ref, watch etc. When serving the project, Vue says it's "failed to compile". WebStorm actually recognizes the exports, suggests them and shows types, but the error is shown regardless. Some exports like computed and defineComponent work just fine.

            What I've tried:

            • Rollback to the previously used Vue version "3.2.2" > "3.0.11". It makes the abovementioned type errors disappear, but the app stops working entirely, showing lots of TypeError: Object(...) is not a function errors in console and not rendering the app at all. In the terminal, some new warnings are introduced: "export 'X' (imported as '_X') was not found in 'vue' where X is createElementBlock, createElementVNode, normalizeClass and normalizeStyle.
            • Rollback other dependencies. None of the ones that I tried helped fix the problem, unfortunately.
            • Manually declare the entirety of 'vue' module. We can declare the 'vue' module exports in shims-vue.d.ts, and it actually makes the errors disappear, however, this seems like a terrible, time-consuming workaround, so I would opt out for a better solution if possible.

            My full list of dependencies:



            Answered 2021-Aug-15 at 13:53

            That named exports from composition API are unavailable means that vue is Vue 2 at some place which has only default export. Since Vue 3 is in dependencies and both lock file and node_modules were refreshed, this means that Vue 2 is nested dependency of some direct dependency.

            The problem needs to be investigated in lock file. It shows that @vue/cli-plugin-unit-jest@4.5.13 depends on vue-jest@3 which depends on vue@2.

            A possible solution is to upgrade @vue/cli-plugin-unit-jest to the latest version, next. The same likely applies to other @vue/cli-* packages because they have matching versions.



            vue-chart data is loaded correctly but options are ignored
            Asked 2022-Jan-19 at 18:24

            This is driving me nuts.

            I have a chart from vue-chart, chartData is loaded correctly, the chart displays correctly, but options are definitely not taken in account, despite setting them statically at the very end on renderChart call.

            This is using vue2/chartjs 2.9.4/vue-chartjs 3.5.1.



            Answered 2022-Jan-19 at 18:24

            You are using V3 syntax of chart.js while using V2 so that wont work. In V2 the title and tooltip config has to be at the root of your options object and tooltip has to be renamed to tooltips.

            For all documentation you can read the V2 config to see where to specify things:

            Or you can use the migration guide in reverse:



            Vue Chart 3 - Doughnut Charts with Text in the Middle (Trouble registering a plugin)
            Asked 2022-Jan-07 at 20:03

            EDIT: My codesandbox is working, but it's not perfect. In my actual project I've better utilized ts and am just making an if check for the charttype so the font doesn't paste on all the charts you have. I still need to work on making the fontsize responsive and prettier, but I will try and update the codesandbox as much as I can!

            If anyone would like to add to it please do! Also, post your link in the comments so anyone else having these issues can see them too!

            I am attempting to make a doughnut chart that looks like this:

            I've been trying to figure out how to get the code in this example using VueChartJS (VueChart3 is a TS safe rewrite of VueChartJS and works the same, just in composition API), but cannot figure out how to get the plugins to work properly.

            vue-chartjs - Doughnut chart with text in the middle

            Working Example from post

            The example in the post above uses a textCenter() function and constantly access the context ctx variable. The first error I get however reads Property 'pluginService' does not exist on type 'typeof Chart' and also a Cannot read properties of undefined (reading 'register'). I think this has to do with the way VueChart3 and it's Chart.register(...registerables) line.

            I've commented out all of the code that breaks the chart currently while I try and fix this issue. I am really stumped on where to go with this now and could really use a bit guidance.


            CodeSandbox Link




            Answered 2022-Jan-06 at 19:58

            This is because pluginService is V2 syntax, to register plugins globally in V3 you can do it the same way you did with the registerables like so:



            Chart is too big. How can I reduce size for the chart in vue js?
            Asked 2021-Dec-06 at 09:59

            I have embedded line chart from chart JS in vue js project. However my chart is too big for my page. How can I make it appear small and compact in my webpage? This is the first time I am adding charts to vue js. Any advice or tips will be really helpful for me. Thanks. Here is my code.



            Answered 2021-Dec-06 at 09:59

            You will need to wrap that Vue component in another component. In that other component you can set a height and with to the div your chart component is in.



            Vue.js not rendering html file with data returned by a Flask back-end
            Asked 2021-Oct-27 at 12:13

            I am trying reproduce this project that consists of an app with a back-end component in Flask and a front-end that uses vue-js. The back-end is the following:



            Answered 2021-Oct-27 at 12:13

            You should have two functions in flask - with two different URLs.

            First function with url / should send only template - and this URL without limit=100&offset=100 you should load in browser.

            Second function with url ie. /get_data should send JSON data - and Vue.http.get() should use it with limit=100&offset=100 like /get_data?limit=100&offset=100

            If you want to do it with single url then you should use some if/else to detect if page is loaded by browser and send HTML - or by Vue and send JSON. Maybe you could use some HTTP header with informat that you expecte response with JSON. Accept: application/json

            Full working code with two functions



            Vue-chartjs not rendering chart until page resize
            Asked 2021-Oct-26 at 08:43

            I am using vue-chartjs to create charts for my application. I am passing the chartData as a prop. My chart doesn't render at first but does when I resize the window. Here is my code. First the chart component:



            Answered 2021-Oct-25 at 12:14

            Solved the problem using a similar solution as "Chart with API data" from the documentation.

            TL;DR: Adding a v-if on the chart


            Community Discussions, Code Snippets contain sources that include Stack Exchange Network


            No vulnerabilities reported

            Install vue-chartjs

            Or if you want to use it directly in the browser add. to your scripts. See Codepen.
            yarn install: yarn add vue-chartjs chart.js@2.9.4
            npm install: npm install vue-chartjs chart.js@2.9.4
            For a detailed explanation of how things work, check out the guide and docs for vue-loader.


            Fork it ( )Create your feature branch (git checkout -b my-new-feature)Commit your changes (git commit -am 'Add some feature')Push to the branch (git push origin my-new-feature)Create a new Pull Request
            Find more information at:

            Find, review, and download reusable Libraries, Code Snippets, Cloud APIs from over 650 million Knowledge Items

            Find more libraries
          • HTTPS


          • CLI

            gh repo clone apertureless/vue-chartjs

          • sshUrl


          • Stay Updated

            Subscribe to our newsletter for trending solutions and developer bootcamps

            Agree to Sign up and Terms & Conditions

            Share this Page

            share link