Questions tagged [vue-chartjs]
vue-chartjs is a Vue.js wrapper for Chart.js. It allows you to create reuseable chart components in Vue.js
0
votes
0answers
8 views
vue-chartjs: is it possible to dynamically change color based on value
Using vue-chartjs is it possible to change to color of the bar?
This is similar to this question which is based on chart.js
chart.js bar chart color change based on value, and the jsfiddle provided ...
0
votes
2answers
14 views
Dynamically Extend VueJs Component based on prop
Firstly I want to say this question isn't set in stone as I am very willing to try other suggestions being the fact I may have completely missed a suitable method.
I am using Vue-ChartJs within JSX ...
0
votes
1answer
33 views
How to update chart using mixin on state change?
I've mapped chartData to a state property using vuex. What I'd like to do is update the chart when a dataset is updated. The mixin automatically sets a watcher on chartData according to the ...
0
votes
1answer
28 views
Vue-ChartJS - Circular structure to JSON
i'm using Vue-Chartjs lib, and i'm trying to make a line chart. Well, i have done it with this code below, it works! The graph is drawed. But when i change the value of any variable inside my Vue Data ...
0
votes
0answers
13 views
Chartjs starting angle rotation alignment
I have a chartjs doughnut chart. I need to align the starting angle rotation.
Above is the actual result of my work.
and I need it aligned dynamically like this.
Just need help for the computation ...
0
votes
1answer
11 views
How to hide the area lines in Polararea using vue-chartjs
I just have a polararea chart using vue-chartjs (http://vue-chartjs.org/#/). But I don't find the option to hide the 'area lines' (the circle ones) and the numbers (percentage) on them in this chart.
...
0
votes
1answer
25 views
Vue Chart, Component
I have a chart using vue-chart. In the mydata array I need to enter data which are coming from store.js file. I need to push those data to the mydata but without using any button.
counter1:0,
...
0
votes
1answer
53 views
Vue.js with vue-chartjs - pulling data from API
I'm trying to use a similar approach to this project where labels and datasets are defined in a child component with binds to props in the parent component but I'm not getting any results.
"Vue.js ...
0
votes
1answer
53 views
[Vue warn]: You may have an infinite update loop in watcher with expression “chartData”
Below is a copy of my vue file with the watcher mentioned in the warning:
<script>
import { Radar } from 'vue-chartjs'
export default {
extends: Radar,
props:['chartData','options']...
0
votes
0answers
17 views
Reactive vue-chartjs run in dev mode but production build freezes browser
I am trying to create live chart with vuechartjs, after looking at several resources online I managed to put up something that works (on npm run dev)... However I noticed I was unable to things like ...
0
votes
1answer
79 views
I want to show the value of label inside the pie graph. (vue-chartjs / pieceLabel)
I am a student studying vue.
I used Vue-chartjs to draw a graph, and I'd like to display the value on a pie graph.
But I don't know what to do.
Please help me...
the current situation (image) : ...
0
votes
0answers
34 views
How to access or get value of specific graph on chart plot by click event?
I use vue-chartjs to draw some chart like line, bar, etc.
In my project, there are many cases using specific value or lable of data in chart.
Using tooltip option of vue-chartjs, I can check that ...
0
votes
2answers
2k views
Remove excess lines on y axis using chartjs
I wonder how to remove the excess lines on the line chart. I tried to set drawborder to false but of course it just remove the all lines to the axis. I just wanted get rid of the unwanted vertical ...
0
votes
0answers
75 views
How to custom label vue-chartjs
I'm trying to customize the line graph using vuechartjs
Even if you read the official document, it is difficult for you to customize it so please help me.
I want result:
enter image description here
...
0
votes
1answer
22 views
Drawing a doughnut chart with columns inside to represent hourly stats in chart.js
This is a chart that represents a stat per hour. This was taken from last.fm website which shows the no. of "scrobbles" (songs played) per hour.
Is this kind of chart possible with chart.js? I have ...
1
vote
1answer
92 views
(Vue, ChartJS) Create gradient background for chart from child component canvas context
I want to give my chart a gradient background color, but I can't access the canvas context as my chart gets rendered in a wrapper component I wrote.
What I want to achieve:
My actual wrapper rather ...
0
votes
0answers
36 views
how to show data value on bars of the bar-chart?
i am using vue-chart for making a bar-chart. I want to show the values on bar chart body rather then using tooltip? for this what should I do?
In the following link there is a image that how I want ...
0
votes
1answer
15 views
how to show data value on bar chart body rather than using tooltip?
i am using vue-chart for making a bar-chart. I want to show the values on bar chart body rather then using tooltip? for this what should I do?
-1
votes
1answer
117 views
Vuejs - Chartjs - turning a doughnut chart to a gauge - rotation
I am new to vue.js and your help and advise would be much appreciated.
I am using Chartjs and i would like to rotate my pie chart so it looks like a gauge. I am unsure where i am going wrong with my ...
1
vote
1answer
65 views
Vue-chartjs: Re-render a chart even if data hasn't changed
I have a component with two charts which I show on the button click. I use the same component of a chart but I give different chartData to it through two different getters. The chart looks like this:
...
0
votes
2answers
1k views
Vue and Chartjs - Running a simple example of vue-chartjs
I'm trying to use Chart.js with Vue.js and this is what I got it is compiling but I don't see anything displayed on the GUI.
This is my file DonutChart.vue:
<template>
// NOT SURE IF ...
1
vote
2answers
1k views
Vue.js Uncaught TypeError: _vueChartjs.Line.extend is not a function
Just starting Vue.js and webpack. I'm trying to add vue-chartjs functionality to my project. I'm receiving the following error:
Uncaught TypeError: _vueChartjs.Line.extend is not a function
at Object....
1
vote
1answer
33 views
I dont know how to sum expenses based on category in sequelize
I've got my expense-tracker app. There are three tables - User,Expense,Category. Each Expense model has name,date,categoryId,amonut.
There is a REST API(ExpressJS+Sequelize+MySQL) which I consume with ...
1
vote
1answer
52 views
Vue-Chart.js: a chart doesn't begin from zero
Here is my chart:
<script>
import { Bar, mixins } from 'vue-chartjs';
export default {
extends: Bar,
mixins: [mixins.reactiveProp],
props: ['options'],
mounted() {
this.renderChart(this....
1
vote
1answer
137 views
Vue-Chartjs reactive chart options passing
So I follow the author's doc and make a reactive chart just as the doc sample.
A js file & a vue file :
// the chart.js file
import { Line, mixins } from 'vue-chartjs'
const { reactiveProp ...
0
votes
1answer
33 views
Some questions as for vue-chartjs
In Laravel 5.6 / vuejs 2.5 application I use vue-chartjs, but my charts looks like :
https://imgur.com/a/ru1dXlm
I want some more:
having several items(artists in my case) I want to see them half-...
1
vote
1answer
264 views
Computed property as reactiveprop to vue-chartjs?
I'm at my wits' end trying to figure out what's wrong with this code. Boiled down, I have a vuejs component that wants to pass data to a vue-chartjs chart component. Following this example from the ...
0
votes
1answer
63 views
Vue.js: How to retrieve data from API for vue chart.js
As I have no experience with drawing charts, using vue-chart.js for my project can be not very understandable.
I receive this data from API:
reports: {
stats: {
2018-02: {
users: {
"...
0
votes
1answer
36 views
Vue.js: Data for a chart is redefined
I use vue-chart.js to draw a simple chart.
import { Line } from 'vue-chartjs';
export default {
extends: Line,
mounted() {
this.renderChart({
labels: [this.getChartLabels],
datasets: [
...
5
votes
1answer
534 views
vue-chartjs reactive data error
I am trying to use reactive data mixin for vue-chartjs
The mounted function to set the initial data is working and I can see the chart correctly using the API response:
fetchSessionTrends() {
...
0
votes
0answers
52 views
Always return numbers of values inside of array Javascript,
Good day,
I have a JSON data like this,
const incidents = [
{
"id": 3,
"fullName": "Fatima Elaran",
"address": "San Marcos, Calumpit, Bulacan",
},
{
"id": 4,
"...
0
votes
1answer
208 views
vue-chartjs how to load data
Linechart.js
import { Line } from 'vue-chartjs'
export default {
extends: Line,
props:['chart']
mounted () {
this.renderChart({
labels: ['1','2','3','4','5','6','7'],
...
1
vote
1answer
24 views
Integrating vue-chartjs(version from 2.8.7 to 3.2.1)?
I have integrated the npm vuecharts(version-2.8.7) in my project , now i upgraded the version to 3.2.1, when i run the project the following errors occurs, what will be the solution for it?
...
-1
votes
1answer
24 views
With vue-chart.js , Can pass chart type as a property?
With vue-chart.js , Can pass chart type as a property?
Want example source code. Please teach me.
0
votes
1answer
125 views
Error in console with Vue-chartJS and Webpack
I installed vue-chartjs and also added chart.js both using NPM
When I run npm start my server is started but in broswer console i get an error
TypeError: __WEBPACK_IMPORTED_MODULE_0_vue_chartjs__....
-1
votes
1answer
178 views
add shadow for line in vue chartjs
I want to add shadow for the line in my chart.
My code is like so
import { Line } from 'vue-chartjs'
import Chart from 'chart.js'
let draw = Chart.controllers.line = Chart.controllers....
0
votes
1answer
73 views
Vue chartjs disables datasets by default
In my project for my clan, Lords of War on the Supercell games. I am trying to make a chart for the current donations with chart.js. I'm using Vue for the front-end and vue-chartjs for the charts. ...
0
votes
1answer
82 views
vue js bar-chart gradient color not showing
I'm using vue-chartjs for chart
This is my BarChart.js
import {Bar} from 'vue-chartjs'
export default {
extends: Bar,
data () {
return {
gradient: null,
gradient2: null,
...
0
votes
2answers
131 views
Error when trying to use ReactiveProp in vue-chartjs
I'm trying to use a component called "Vue-Chartjs" to create a LineChart.[
I'm passing some data from a MySql database to the 'chartData' prop, defined in the Chart.js file.
But I'm getting this ...
1
vote
1answer
370 views
VueJs - Passing variables between methods
There is a v-select component and on change I am firing up fillData(selected) where selected is the v-model. And I need to update the label in datacollection.datasets.label on change. How do I do that ...
0
votes
1answer
140 views
Vue Chart.js doesn't get initialized in Vue Tab
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 ...
2
votes
2answers
714 views
vue.js vue-chartjs chart not updating when chartData replaced, updated etc
I am attempting to make a vue with vue-chartjs. I have followed all the associated documentation with regards to re-rendering the chart when the chartData prop is updated. My chart will only update ...
0
votes
0answers
29 views
Transfer API object to Chartjs dataset mistmatch
I have a Vuejs SPA and there is a table component where in each row a chart (Chartjs) gets rendered with the data of this row. I am getting my data from an API and i try to transfer this data to the ...
0
votes
1answer
60 views
Vuejs chart not displaying after page reload
I created a chart using vue-chartjs which renders some data from a JSON endpoint.
The problem is that the chart is not rendered after the page reloads.
This is the HTML that calls the chart component....
0
votes
0answers
124 views
How to get width of horizontal bar in Chart.js
I try to get the width of horizontal bar, because I want to position the tooltips in the center of it. Unfortunately, width of elements is set to undefined. It is because of this line:
https://github....
0
votes
1answer
227 views
vue-chartjs not working properly in flexbox and when resize chart goes blank
I'm using vue-chartjs but every time I resize it, it's not layout properly anymore. It goes beyond the screen. Also when I resize it, the chart went missing but it will appear after a while but ...
0
votes
2answers
283 views
Vue-chartjs : reload chart on state change
I’m trying to make a chart reactive to state change, I have some filters on a sidenav and a component which include chart.js component like this :
<tendance-chart slot="content" class="chart-...
0
votes
1answer
253 views
vue-chartjs load data from parent component
I have a component for a LineChart, here is the code :
<script>
import { Line } from 'vue-chartjs'
export default {
extends: Line,
props: ['data', 'options'],
mounted () {
...
1
vote
1answer
374 views
Vue 2.5: Passing prop to component. Prop gets bundled in variable name
I'm new to Vue.js and my first try is to make a simple line-chart using ChartJS (vue-chartjs bundle).
I've used the "HelloWorld.vue" as base material, and created a LineChart.js
The problem is that ...
3
votes
0answers
515 views
Customize the tooltip of Chart.js
I'm using the last version of vue and vue-chart.js.
I'd like to customize the tooltip which is displayed when hovering a point.
Issue
The tooltip is not changed from the default one
Question
How ...
