vue-chart-js | Chart.js wrapper component based on Vue.js | Chart library
kandi X-RAY | vue-chart-js Summary
kandi X-RAY | vue-chart-js Summary
Chart.js wrapper component based on Vue.js
Support
Quality
Security
License
Reuse
Top functions reviewed by kandi - BETA
Currently covering the most popular Java, JavaScript and Python libraries. See a Sample of vue-chart-js
vue-chart-js Key Features
vue-chart-js Examples and Code Snippets
Community Discussions
Trending Discussions on vue-chart-js
QUESTION
I'm using vue-chart-js with the labels plugin for a donut chart.
When I click on a donut section, the section background color changes correctly. I want to trigger a label font color change for the specific donut chart section I clicked as well.
This is how I trigger a label color change for the donut chart options:
...ANSWER
Answered 2020-Sep-16 at 11:32You can use update method. See Updating Options. And actually vue-chartjs also use that for chartData.
On data mutation, it will call update() if the data inside the datasets has changed, or renderChart() if new datasets were added. [source]
Example code:
QUESTION
I'm using the following tutorial (pull download stats for NPM packages) to build a basis for my charted webapp :
- https://hackernoon.com/lets-build-a-web-app-with-vue-chart-js-and-an-api-544eb81c4b44
- https://github.com/apertureless/npm-stats
I have extracted the below code from the tutorial and modified it so it does the pure basics. Get data and present data. Specifically from these:
- https://github.com/apertureless/npm-stats/blob/develop/src/pages/Start.vue
- https://github.com/apertureless/npm-stats/blob/develop/src/components/LineChart.vue
Please note: The code executes the API call and retrieves data no problem. However it will only render that data in the chart if I make a code change. For example changing the color of a line to something else. It seems to only work on the next 'cycle' if that makes sense. Once the data has rendered, if I refresh that page it is once again blank. I suspect it has something to do with the pages timing. However not sure where to begin or what I'm looking for.
App.Vue
...ANSWER
Answered 2020-Mar-12 at 13:15You need to notify the child component to re-render itself.
add a watcher is one way, watch the data change and update it.
Another easier way is, add a key prop to it.
in your App.vue, do like this:
QUESTION
I've got a component with two vue-tabs, with two instances of vue-chart-js in each of it. Though they get initialized without errors, a chart in the unactive tab returns nothing, when I try to extract an image from it via document.querySelector('#mySecondChart').toDataURL(). Only when I click that tab and make it active, this chart transforms into image. The chart in the default active tab transforms into image without errors. Here's the code:
ANSWER
Answered 2018-Feb-26 at 19:17After searching through documentation, I've discovered that the reason of the problem lies within Chart.js itself -- if the parent element containing the chart has display: none or is hidden in some other ways, the canvas rendered in it gets the height and width properties equal to 0. This may be avoided if during chart instance's initialization pass to its options the following parameters:
QUESTION
I am following this tutorial, by Alligator, which explains how to create a basic line graph with vue js and chart js. The code works by defining a createChart vue method, importing chart configurations,planetChartData, and then calling the method once the vue instance is mounted to create a graph instance.
I, however, am interested in updating the line chart with new data points once an initial chart has been rendered to the html canvas element.
According to the chart js docs, a chart can be updated with the following function.
...ANSWER
Answered 2018-Jul-13 at 04:52You have to save a reference to the instance of your chart, namely in your createChart method.
Full working example on CodeSandbox.
QUESTION
How should I refer to the chart in a vue chart instance and destroy it? I've tried:
...ANSWER
Answered 2017-Oct-25 at 20:23The Chart object accessible via this._chart is not set until after the renderChart method is called. What's most likely happening is that your chartData is somehow being updated before that renderChart method has been called. So, the watcher for chartData is referencing this._chart before it has been defined.
However, vue-chartjs has a baked-in way to re-render the chart when the dependant data change: the reactiveData and reactiveProp mixins. By adding either of these mixins, the changes to the chartData (data-property or prop, respectively) will re-render the chart to reflect the updated data.
You should use the reactiveData mixin instead:
Community Discussions, Code Snippets contain sources that include Stack Exchange Network
Vulnerabilities
No vulnerabilities reported
Install vue-chart-js
Support
Reuse Trending Solutions
Find, review, and download reusable Libraries, Code Snippets, Cloud APIs from over 650 million Knowledge Items
Find more librariesStay Updated
Subscribe to our newsletter for trending solutions and developer bootcamps
Share this Page
