The chart list is not showing - vue.js

This is my chart code
datasets: [
{
label: "Fraction KG",
data: data,
backgroundColor: [
"rgba(255, 99, 132, 0.2)",
"rgba(54, 162, 235, 0.2)",
"rgba(255, 206, 86, 0.2)",
"rgba(75, 192, 192, 0.2)",
"rgba(200, 121, 121, 0.2)",
],
},
],
labels: label
And this is how my chart looks:
Why is not the list beside the chart not showing is there some option value yu have to set?
this is the pie component
PieChart.js
import { Pie, mixins } from 'vue-chartjs';
import globalOptionsMixin from "./globalOptionsMixin";
export default {
name: 'pie-chart',
extends: Pie,
mixins: [mixins.reactiveProp, globalOptionsMixin],
props: {
extraOptions: {
type: Object,
default: () => ({})
}
},
data() {
return {
ctx: null
};
},
mounted() {
this.$watch(
'chartData',
(newVal, oldVal) => {
if (!oldVal) {
debugger;
this.renderChart(this.chartData, this.extraOptions);
}
},
{ immediate: true }
);
}
};

The ChartJs labels are determined by the labels property. In your example, this is set to an unknown variable called label. This should be an array of strings.
For example:
labels: ['Italy', 'India', 'Japan', 'USA']
You could set this array to your label variable, wherever it is defined:
const label = ['Italy', 'India', 'Japan', 'USA'];
{
...
labels: label
}

Template contain chart tag
<chartjs-pie :labels="labels" :data="dataset" :bind="true"></chartjs-pie>
Then pass data through script
data: function data() {
return {
labels: ['Italy', 'India', 'Japan', 'USA'],
dataset: [..]
};
},

Related

Mixed bubble chart with line chart in vue-chartjs4

I am using vue2 with vue-chartjs4 legacy mode and I want to create a mixed chart that uses the line chart and bubble chart component.
My MixedChart component looks like this:
<template>
<Bubble :chart-data="chartData" :chart-options="options"/>
</template>
<script>
import { Bubble } from 'vue-chartjs/legacy';
import { Chart as ChartJS, Title, Tooltip, Legend, PointElement, LineElement, CategoryScale, LinearScale } from 'chart.js'
ChartJS.register(Title, Tooltip, Legend, PointElement, LineElement, CategoryScale, LinearScale)
export default {
name: 'bubble-chart',
components: { Bubble },
props: {
chartData: {
type: Object,
required: true
},
options: {
type: Object,
default: () => {}
}
}
};
</script>
And my data looks like this:
{
labels: ['', ' ', ''],
datasets: [{
type: 'bubble',
label: 'bubble',
backgroundColor: config.colors.info,
borderColor: config.colors.info,
data: [{
x: ' ', // use middle label
y: 20,
r: 8
}],
order: 3
}, {
type: 'line',
label: 'test',
borderColor: config.colors.danger,
data: [20, 20, 20],
fill: false,
pointRadius: 0,
order: 1
}, {
type: 'line',
label: 'test1',
borderColor: config.colors.warning,
data: [30, 30, 30],
fill: false,
pointRadius: 0,
order: 1,
hidden: true
}, {
type: 'line',
label: 'test2',
borderColor: config.colors.primary,
data: [40, 40, 40],
fill: false,
pointRadius: 0,
order: 2
}],
}
This results in; Error in mounted hook: "Error: "line" is not a registered controller.".
How do you create a mixed chart in chart-vuejs4?
As your error states you need to import and register the LineController
import {Chart, LineController} from 'chart.js';
Chart.register(LineController);
Or you can just import everything and let chart.js register it:
import Chart from 'chart.js/auto'

Update data when pressing submit in chartjs in vuejs

I'm creating a chart showing data in vuejs, I try to update labels again but still not working.
In ChartjsComponentLineChart.vue :
<script>
import { Line } from 'vue-chartjs'
export default {
extends: Line,
props: {
data: {
type: Object,
default: null,
},
options: {
type: Object,
default: null,
},
plugins: {
type: Array,
default: null,
},
styles: {
type: Object,
default: null,
},
},
mounted() {
this.renderChart(this.data, this.options, this.plugins, this.styles)
},
}
</script>
In report.vue
<b-card-body>
<chartjs-component-line-chart
:height="400"
:data="data"
:options="options"
:plugins="plugins"
/>
</b-card-body>
<b-button
variant="primary"
class="btn-tour-finish"
#click="submitData"
>Submit
</b-button>
data() {
return: {
data: {
labels: [],
datasets: [
{
data: [70, 95, 100, 120, 257, 271, 300, 321, 383, 450],
label: "Supper",
borderColor: "#3e95cd",
},
],
},
options: {
title: {
display: true,
text: "Report",
},
responsive: true,
maintainAspectRatio: false,
},
}
},
created() {
this.data.labels = [1980, 1985, 1990, 1995, 2000, 2005, 2010, 2015, 2020, 2025];
},
methods: {
submitData() {
this.data.labels = [1985, 1990, 1995, 2000, 2005, 2010, 2015, 2020, 2025, 2030];
}
}
The chart worked. But when I click submit (submitData()) the labels doesn't update. Is there a way to update the 'labels' when I click. Give me any ideas. Thanks
Chart.js itself is not reactive, you need to call the update method yourself when the data is changed. This behaviour of being non reactive out of the box is being taken over by vue-chartjs.
To make it reactive you need to add the reactiveProp mixin to your lineChart component according to the docs.
import { Line, mixins } from 'vue-chartjs'
const { reactiveProp } = mixins
export default {
extends: Line,
mixins: [reactiveProp],
props: ['options'],
mounted () {
// this.chartData is created in the mixin.
// If you want to pass options please create a local options object
this.renderChart(this.chartData, this.options)
}
}
You can also implement your own watcher and call the update method of chart.js yourself according to the docs
watch: {
data () {
this.$data._chart.update()
}
}
I fixed it successfully.In this way : v-if="loaded"
<b-card-body>
<chartjs-component-line-chart
v-if="loaded"
:height="400"
:data="data"
:options="options"
:plugins="plugins"
/>
</b-card-body>
data() {
return: {
data: {
loaded: false,
labels: [],
datasets: [
{
data: [70, 95, 100, 120, 257, 271, 300, 321, 383, 450],
label: "Supper",
borderColor: "#3e95cd",
},
],
},
options: {
title: {
display: true,
text: "Report",
},
responsive: true,
maintainAspectRatio: false,
},
}
},
created() {
this.data.labels = [1980, 1985, 1990, 1995, 2000, 2005, 2010, 2015, 2020, 2025];
this.loaded = true;
},
methods: {
submitData() {
this.data.labels = [1985, 1990, 1995, 2000, 2005, 2010, 2015, 2020, 2025, 2030];
this.loaded = true;
}
}

update vue chart-js y axis max value without re rendering entire chart

I am working on a project where I am implementing some charts from the Vue-Chartjs library. I need the Y-axis max value to change everytime the user changes the filters given. I Import an existing barchart from the vue-chartjs library. In the code there is a javascript file that has some defaults already, to set extra options I can use the extraOptions object as a prop to personalize each chart accordingly. Here is the default component:
import { Bar } from 'vue-chartjs'
import { hexToRGB } from "./utils";
import reactiveChartMixin from "./mixins/reactiveChart";
let defaultOptions = {
tooltips: {
tooltipFillColor: "rgba(0,0,0,0.5)",
tooltipFontFamily: "'Helvetica Neue', 'Helvetica', 'Arial', sans-serif",
tooltipFontSize: 14,
tooltipFontStyle: "normal",
tooltipFontColor: "#fff",
tooltipTitleFontFamily: "'Helvetica Neue', 'Helvetica', 'Arial', sans-serif",
tooltipTitleFontSize: 14,
tooltipTitleFontStyle: "bold",
tooltipTitleFontColor: "#fff",
tooltipYPadding: 6,
tooltipXPadding: 6,
tooltipCaretSize: 8,
tooltipCornerRadius: 6,
tooltipXOffset: 10,
},
legend: {
display: false
},
scales: {
yAxes: [{
ticks: {
fontColor: "#9f9f9f",
fontStyle: "bold",
beginAtZero: true,
display: false,
min: 0,
max: 100
},
gridLines: {
display: false,
drawBorder: false,
}
}],
xAxes: [{
gridLines: {
display: false,
drawBorder: false,
},
}],
}
};
export default {
name: 'BarChart',
extends: Bar,
mixins: [reactiveChartMixin],
props: {
labels: {
type: [Object, Array],
description: 'Chart labels. This is overridden when `data` is provided'
},
datasets: {
type: [Object, Array],
description: 'Chart datasets. This is overridden when `data` is provided'
},
data: {
type: [Object, Array],
description: 'Chart.js chart data (overrides all default data)'
},
color: {
type: String,
description: 'Chart color. This is overridden when `data` is provided'
},
extraOptions: {
type: Object,
description: 'Chart.js options'
},
title: {
type: String,
description: 'Chart title'
},
},
methods: {
assignChartData() {
let { gradientFill } = this.assignChartOptions(defaultOptions);
let color = this.color || this.fallBackColor;
return {
labels: this.labels || [],
datasets: this.datasets ? this.datasets : [{
label: this.title || '',
backgroundColor: gradientFill,
borderColor: color,
pointBorderColor: "#FFF",
pointBackgroundColor: color,
pointBorderWidth: 2,
pointHoverRadius: 4,
pointHoverBorderWidth: 1,
pointRadius: 4,
fill: true,
borderWidth: 1,
data: this.data || []
}]
}
},
assignChartOptions(initialConfig) {
let color = this.color || this.fallBackColor;
const ctx = document.getElementById(this.chartId).getContext('2d');
const gradientFill = ctx.createLinearGradient(0, 170, 0, 50);
gradientFill.addColorStop(0, "rgba(128, 182, 244, 0)");
gradientFill.addColorStop(1, hexToRGB(color, 0.6));
let extraOptions = this.extraOptions || {}
return {
...initialConfig,
...extraOptions,
gradientFill
};
}
},
mounted() {
this.chartData = this.assignChartData({});
this.options = this.assignChartOptions(defaultOptions);
this.renderChart(this.chartData, this.options, this.extraOptions);
}
}
I use this js file to import the bar chart inside a vue component like you see down below.
everytime the input of the form changes i need to re render the chart. I use the onInputChange() method to turn the boolean loaded to false and call the loadData() method.
Inside the loadData() method I make an axios request that gets me the right data every time. I also get the maximum value for my Y axis.
Then in the response I call on updateChart() so that I can update the data and the max value of the chart. then i turn the boolean loaded to true again so that my chart renders accordingly.
The problem with this approach is that the chart disappears completely for a split of a second. Before deciding to change the max Value of the Y axis I was able to update the data of my chart without having to use the v-if="loaded".
I need to find a solution where the chart re renders without it completely disappearing from the page. I know some suggested to use computed variables but i don't fully understand how it is supposed to work. Here is the component minus the form fields.
I guess in it's essence what I want is to update the Y axis max value without having to re render the entire chart.
<template>
<div>
<BarChart v-if="loaded" :labels="chartLabels"
:datasets="datasets"
:height="100"
:extraOptions="extraOptions"
>
</BarChart>
<br>
</div>
</template>
<script>
import BarChart from '../../components/Library/UIComponents/Charts/BarChart'
import Dropdown from "../../components/Library/UIComponents/Dropdown"
import GroupedMultiSelectWidget from "~/components/widgets/GroupedMultiSelectWidget"
import SelectWidget from "../../components/widgets/SelectWidget";
export default{
name: 'PopularChart',
components: {BarChart, Dropdown, SelectWidget, GroupedMultiSelectWidget},
data(){
return {
loaded:true,
form:{
day: 'Today',
workspace:'',
machine_family: [],
duration: [],
user_group: [],
dt_start:'',
dt_end:''
},
url: `/api/data_app/job_count_by_hour/`,
chart_data: [],
days: [ {day:"Today", id:"Today"},
{day:"Monday", id:"0"},
{day:"Tuesday",id:"1"},
{day:"Wednesday",id:"2"},
{day:"Thursday",id:"3"},
{day:"Friday",id:"4"},
{day:"Saturday",id:"5"},
{day:"sunday",id:"6"} ],
chartLabels: ["00u", "1u", "2u", "3u","4u","5u", "6u", "7u", "8u", "9u", "10u", "11u", "12u", "13u", "14u", "15u","16u", "17", "18u","19u","20u","21u","22u","23u"],
datasets: [],
maximumValue: '',
extraOptions:{}
}
},
methods: {
onInputChange() {
this.loaded = false
this.loadData()
},
async loadData() {
await this.$axios.get(`${this.url}?day=${this.form.day}&date_start=${this.form.dt_start}&date_end=${this.form.dt_end}&workspace=${this.form.workspace}&user_group=${this.form.user_group}&machine_family=${this.form.machine_family}`)
.then(response => {
this.updateChart(response.data.results,response.data.maximum)
this.loaded = true
})
},
updateChart(data,maxValue) {
this.datasets = [{
label: ["jobs %"],
backgroundColor:"#f93232",
data: data
},]
this.maximumValue = maxValue
this.extraOptions = {
tooltips: {
callbacks:{
label: function (tooltipItems,){
if (tooltipItems.value > ((50/100) * maxValue)){
return 'busy';
}else if (tooltipItems.value < ((30/ 100) * maxValue) ){
return ' not busy';
}else if ( tooltipItems.value < ((40/ 100) * maxValue )){
return 'kind of busy'
}
}
}
},
scales: {
yAxes: [{
gridLines: {
zeroLineColor: "transparent",
display: false,
drawBorder: false,
},
ticks: {
max: this.maximumValue,
display: true,
}
}],
xAxes: [{
gridLines: {
zeroLineColor: "transparent",
display: false,
drawBorder: false,
},
}],
},
}
},
},
mounted() {
this.loadData()
},
}
</script>
You can bind the chart to a variable in data(), initialize it with some defaults in mounted() and whenever you want to update the chart data, you use the Chart.js API.
An implementation could look something like this:
export default {
data() {
return {
chart: null
};
},
mounted() {
this.chart = new Chart(/* defaults */);
},
methods: {
updateChart(data) {
this.chart.data.datasets = data;
/* rest of the chart updating */
this.chart.update();
}
}
};

VueJS + Chartjs - Chart only renders after code change

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
<template>
<v-app style="background-color: rgb(228, 228, 228);">
<section class="One">
<v-card class="One" color="rgb(255, 255, 255)" >
<LineChart :chart-data="downloads" :chart-labels="labels"/>
</v-card>
</section>
</v-app>
</template>
<script>
import axios from 'axios';
import LineChart from './components/test3.vue';
export default {
name: 'App',
components: {
LineChart,
},
data () {
return {
package: '',
packageName: '',
loaded: false,
loading: false,
downloads: [],
downloadsYear: [],
downloadsMonth: [],
downloadsWeek: [],
labels: [],
labelsYear: [],
labelsMonth: [],
labelsWeek: [],
showError: false,
showSettings: false,
errorMessage: 'Please enter a package name',
periodStart: '',
periodEnd: new Date(),
rawData: '',
totalDownloads: '',
dailyPng: null,
weeklyPng: null,
monthlyPng: null,
yearlyPng: null
}
},
mounted(){
this.loaded = false
axios.get(`https://api.npmjs.org/downloads/range/2017-01-01:2017-04-19/vue`)
.then(response => {
this.rawData = response.data.downloads
this.downloads = response.data.downloads.map(entry => entry.downloads)
this.labels = response.data.downloads.map(entry => entry.day)
this.packageName = response.data.package
this.totalDownloads = this.downloads.reduce((total, download) => total + download)
this.setURL()
this.groupDataByDate()
this.loaded = true
this.loading = false
})
.catch(err => {
this.errorMessage = err.response.data.error
this.loading = false
})
},
};
</script>
Chart Component:
<script>
import { Line } from 'vue-chartjs'
export default {
extends: Line,
props: {
chartData: {
type: Array,
required: false
},
chartLabels: {
type: Array,
required: true
}
},
data () {
return {
gradient: null,
options: {
showScale: true,
scales: {
yAxes: [{
ticks: {
beginAtZero: false,
},
gridLines: {
display: true,
color: '#EEF0F4',
borderDash: [5, 15]
}
}],
xAxes: [ {
gridLines: {
display: true,
color: '#EEF0F4',
borderDash: [5, 15]
}
}]
},
tooltips: {
backgroundColor: '#4F5565',
titleFontStyle: 'normal',
titleFontSize: 18,
bodyFontFamily: "'Proxima Nova', sans-serif",
cornerRadius: 3,
bodyFontColor: '#20C4C8',
bodyFontSize: 14,
xPadding: 14,
yPadding: 14,
displayColors: false,
mode: 'index',
intersect: false,
callbacks: {
title: tooltipItem => {
return `🗓 ${tooltipItem[0].xLabel}`
},
label: (tooltipItem, data) => {
let dataset = data.datasets[tooltipItem.datasetIndex]
let currentValue = dataset.data[tooltipItem.index]
return `📦 ${currentValue.toLocaleString()}`
}
}
},
legend: {
display: false
},
responsive: true,
maintainAspectRatio: false
}
}
},
mounted () {
this.gradient = this.$refs.canvas
.getContext('2d')
.createLinearGradient(0, 0, 0, 450)
this.gradient.addColorStop(0, 'rgba(52, 217, 221, 0.6)')
this.gradient.addColorStop(0.5, 'rgba(52, 217, 221, 0.25)')
this.gradient.addColorStop(1, 'rgba(52, 217, 221, 0)')
this.renderChart({
labels: this.chartLabels,
datasets: [
{
label: 'downloads',
borderColor: '#249EBF',
pointBackgroundColor: 'rgba(0,0,0,0)',
pointBorderColor: 'rgba(0,0,0,0)',
pointHoverBorderColor: '#249EBF',
pointHoverBackgroundColor: '#fff',
pointHoverRadius: 4,
pointHitRadius: 10,
pointHoverBorderWidth: 1,
borderWidth: 1,
backgroundColor: this.gradient,
data: this.chartData
}
]
}, this.options)
setTimeout(() => {
this.download()
}, 500)
},
methods: {
formatNumber (num) {
let numString = Math.round(num).toString()
let numberFormatMapping = [[6, 'm'], [3, 'k']]
for (let [numberOfDigits, replacement] of numberFormatMapping) {
if (numString.length > numberOfDigits) {
let decimal = ''
if (numString[numString.length - numberOfDigits] !== '0') {
decimal = '.' + numString[numString.length - numberOfDigits]
}
numString = numString.substr(0, numString.length - numberOfDigits) + decimal + replacement
break
}
}
return numString
}
}
}
</script>
You 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:
<LineChart :chart-data="downloads" :chart-labels="labels" :key="downloads.length"/>
here i'm using the downloads's length as key value. it's a simple and temp resolution to show you how to use key. In your app you should use some other value as key, incase different api call returns same length data.
you can also set the key to another value, and change this value every time you call the api.

Unable to get data in apex chart

I am trying to use spline area chart of apex chart in my vue js application , and extracting date in the format of timestamp from Firestore in created part of the application and is to be shown in the x axis but x axis in not displaying the timestamp and giving error .
here is the code
export default {
data() {
return {
options : { year: "numeric", month: "numeric",
day: "numeric" },
timestamp:[],
RecruiterChart: {
series: [{
name: 'Total Jobs Posted',
data: [11, 32, 45, 32, 34, 52, 41]
}, {
name: 'Applied Candidates',
data: [31, 40, 28, 51, 42, 109, 100]
}],
chartOptions: {
dataLabels: {
enabled: false
},
stroke: {
curve: 'smooth'
},
colors: themeColors,
xaxis: {
type: 'datetime',
categories: []
},
tooltip: {
x: {
format: 'dd/MM/yyyy'
},
}
}
},
}
},
components: {
VueApexCharts
},
created(){
const thisIns = this;
var u= firebase.auth().currentUser
let Ref=firebase.firestore().collection("Recruiter").doc(u.uid).collection("Jobs")
Ref.orderBy("timestamp", "desc").onSnapshot(function(snapshot){
$.each(snapshot.docChanges(), function(){
var change= this
if(change.type==="added"){
var ab = change.doc.data().timestamp.toDate().toLocaleString("en-CH", thisIns.options)
thisIns.time.push(ab)
thisIns.RecruiterChart.chartOptions.xaxis.categories.push(
ab
)
console.log( thisIns.RecruiterChart.chartOptions.xaxis.categories)
}
})
})
console.log(thisIns.RecruiterChart.chartOptions.xaxis.categories)
},
}
but the graph is giving error
Error: attribute cx: Expected length, "NaN".