vue-chartjs | 📊 Vue.js wrapper for Chart.js | Chart library
kandi X-RAY | vue-chartjs Summary
kandi X-RAY | vue-chartjs Summary
📊 Vue.js wrapper for Chart.js
Top functions reviewed by kandi - BETA
- Generate the chart data
vue-chartjs Key Features
vue-chartjs Examples and Code Snippets
Trending Discussions on vue-chartjs
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)....
ANSWERAnswered 2022-Mar-29 at 08:22
legend is a plugin for charts, so it will be under the
plugins in options.
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...
ANSWERAnswered 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.
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...
ANSWERAnswered 2022-Mar-12 at 14:55
First you can't mutate a
props. So you can't do
this.data = ....
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 :
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:...
ANSWERAnswered 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
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 functionerrors 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:...
ANSWERAnswered 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
@email@example.com depends on
vue-jest@3 which depends on
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.
This is driving me nuts.
I have a chart from
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
This is using
ANSWERAnswered 2022-Jan-19 at 18:24
You are using V3 syntax of chart.js while using V2 so that wont work.
In V2 the
tooltip config has to be at the root of your options object and
tooltip has to be renamed to
For all documentation you can read the V2 config to see where to specify things: https://www.chartjs.org/docs/2.9.4/
Or you can use the migration guide in reverse: https://www.chartjs.org/docs/master/getting-started/v3-migration.html
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
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
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.
ANSWERAnswered 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:
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....
ANSWERAnswered 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.
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:...
ANSWERAnswered 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
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
Full working code with two functions
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:
ANSWERAnswered 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
yarn install: yarn add vue-chartjs firstname.lastname@example.org
npm install: npm install vue-chartjs email@example.com
For a detailed explanation of how things work, check out the guide and docs for vue-loader.
Reuse Trending Solutions
Find, review, and download reusable Libraries, Code Snippets, Cloud APIs from over 650 million Knowledge ItemsFind more libraries
Subscribe to our newsletter for trending solutions and developer bootcamps
Share this Page