Related
I wanna set double yAxis, so I wrote down the code like below
const data = {
labels: ['a', 'b', 'c', 'd', 'e'],
datasets: [
{
type: 'bar',
label: this.$t('numberOfBuilding'),
data: [100, 20, 30, 5, 5],
backgroundColor: [
'rgba(255, 99, 132, 0.2)',
'rgba(255, 159, 64, 0.2)',
'rgba(255, 205, 86, 0.2)',
'rgba(75, 192, 192, 0.2)',
'rgba(54, 162, 235, 0.2)'
],
borderColor: ['rgb(255, 99, 132)', 'rgb(255, 159, 64)', 'rgb(255, 205, 86)', 'rgb(75, 192, 192)', 'rgb(54, 162, 235)'],
borderWidth: 1,
yAxisId: 'y'
},
// {
// type: 'line',
// fill: true,
// label: this.$t('output') + '(' + this.$t('criteriaMonth') + ')',
// data: [200, 500, 600, 800, 1000],
// borderColor: 'rgba(255, 201, 14, 1)',
// backgroundColor: 'rgba(255, 201, 14, 0.5)',
// lineTension: 0.2,
// yAxisId: 'y1'
// },
{
type: 'line',
fill: true,
label: this.$t('output') + '(' + this.$t('sum') + ')',
data: [300, 100, 700, 249, 588],
borderColor: 'rgba(55, 201, 14, 1)',
backgroundColor: 'rgba(55, 201, 14, 0.5)',
lineTension: 0.2,
yAxisId: 'y1'
}
]
}
const config = {
type: 'scatter',
data: data,
options: {
scales: {
y: {
beginAtZero: true,
position: 'left'
},
y1: {
position: 'right',
grid: {
drawOnChartArea: false
}
}
}
}
}
but it doesn't work properly
yAxis which id is 'y1' is at left and datasets[0] which has 'y' as yAxisId presents with 'y1' axis
it seems like yAxisId doesn't connect well with their own datasets
See the below pictures
[result of above code]
(https://i.stack.imgur.com/0moGR.png)
but my another code is work well I don't know what different it is
here's my another code which works well
const data = {
labels: [
1 + this.$t('month'),
2 + this.$t('month'),
3 + this.$t('month'),
4 + this.$t('month'),
5 + this.$t('month'),
6 + this.$t('month'),
7 + this.$t('month'),
8 + this.$t('month'),
9 + this.$t('month'),
10 + this.$t('month'),
11 + this.$t('month'),
12 + this.$t('month')
],
datasets: [
{
type: 'bar',
label: this.$t('totalConsumption') + '(' + this.unit + ')',
data: this.consumptionData,
borderColor: 'rgb(255, 99, 132)',
backgroundColor: 'rgba(255, 99, 132, 0.2)',
yAxisID: 'y'
},
{
type: 'line',
label: this.$t('temperatureAVG') + '(℃)',
data: this.temperatureData,
fill: false,
borderColor: 'rgb(54, 162, 235)',
yAxisID: 'y1'
}
]
}
const config = {
type: 'scatter',
data: data,
options: {
maintainAspectRatio: false,
scales: {
y: {
beginAtZero: true,
position: 'left'
},
y1: {
position: 'right',
grid: {
drawOnChartArea: false
}
}
}
}
}
In the first code, the option name is wrong. You are using yAxisId but the correct one is yAxisID (as in the second sample), id must be uppercase
I use vue3-chart-v2 in my Vue3 app.
I would like to put array instead of predefined numbers.
Can anybody help me?
This is my chart component:
<script>
import { defineComponent } from 'vue'
import { Line } from 'vue3-chart-v2'
export default defineComponent({
name: 'ChanceChart',
extends: Line,
props: {
chartData: {
type: Object,
required: true
},
chartOptions: {
type: Object,
required: false
},
},
mounted () {
this.renderChart(this.chartData, this.chartOptions)
}
})
</script>
And this is how it looks like in the app:
<template>
<Navigation />
<div>
<ChanceChart :chartData="state.chartData"/>
</div>
</template>
<script>
import ChanceChart from '../components/ChanceChart.vue';
export default {
components: {
ChanceChart
},
data() {
return {
enemysCards : [1610, 169, 168, 167, 330, 329, 328, 327, 326, 325, 324, 323, 1, 1610, 1600, 169, 168, 167, 1610, 1600, 169, 168, 167, 11],
state: {
chartData: {
datasets: [
{
label: "Enemy's Chance",
borderColor: '#1161ed',
data: [40, 20, 12, 39, 10, 40, 39, 80, 40, 20, 12, 41, 190]
},
{
label: 'My Chance',
borderColor: '#f87979',
color: '#fff',
data: [60,60,60,60,60,60,60,60,60,60,60,60, 60]
}
],
labels: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12', '13'],
},
chartOptions: {
responsive: true
}
}
}
}
For example i want to take the enemysCards array in the data and the enemysCards.lenght in the labels.
Use computed properties instead of data property :
export default {
components: {
ChanceChart
},
computed: {
chartData(){
return {
datasets: [
{
label: "Enemy's Chance",
borderColor: '#1161ed',
data: this.myFirstArray // <- here
},
{
label: 'My Chance',
borderColor: '#f87979',
color: '#fff',
data: this.mySecondArray // <- here
}
],
labels: this.ennemyCards.map((x, index) => index + 1) // here you can calculate your labels
},
chartOptions: {
responsive: true
}
}
}
data() {
return {
enemysCards : [1610, 169, 168, 167, 330, 329, 328, 327, 326, 325, 324, 323, 1, 1610, 1600, 169, 168, 167, 1610, 1600, 169, 168, 167, 11],
myFirstArray: [40, 20, 12, 39, 10, 40, 39, 80, 40, 20, 12, 41, 190],
mySecondArray: [40, 20, 12, 39, 10, 40, 39, 80, 40, 20, 12, 41, 190],
}
}
I created a line graph with vue apexcharts and I'm trying to enable the selection tool in the toolbar (as explain here :https://apexcharts.com/docs/options/chart/toolbar/ )
But even if I set :
selection: true,
It doesn't appear on the graph.
Here is my vue component :
<template>
<div class="container">
<apexchart :type="typechart" height="350" :options="options" :series="series"></apexchart>
</div>
</template>
<script lang="ts">
import { Vue, Component } from "vue-property-decorator";
import VueApexCharts from "vue-apexcharts";
Vue.component("apexchart", VueApexCharts);
#Component({
components: { MyPlot }
})
export default class MyPlot extends Vue {
witdhgraph: string = "500";
typechart: string = "line";
options: any = {
chart: {
id: "vuechart-example",
toolbar: {
show: true,
offsetX: 0,
offsetY: 0,
tools: {
download: true,
selection: true,
zoom: true,
zoomin: true,
zoomout: true,
pan: true
}
},
autoSelected: "selection"
},
stroke: {
curve: "smooth"
},
colors: ["#00205b"],
xaxis: {
type: "numeric",
categories: [
0,
1,
2,
3,
4,
5,
6,
7,
8,
9,
10,
11,
12,
13,
14,
15,
16,
17,
18,
19,
20,
21,
22,
23,
24,
25,
26,
27,
28,
29,
30,
31,
32,
33,
34,
35,
36,
37,
38,
39,
40,
41,
42,
43,
44,
45,
46,
47,
48,
49
]
},
annotations: {
position: "back",
xaxis: [
{
x: 28,
x2: 32,
strokeDashArray: 1,
borderColor: "#c2c2c2",
fillColor: "#c2c2c2",
opacity: 0.3,
offsetX: 0,
offsetY: 0,
label: {
borderColor: "#c2c2c2",
borderWidth: 1,
borderRadius: 2,
text: "test ",
textAnchor: "middle",
position: "top",
orientation: "horizontal",
offsetX: 0,
offsetY: 0,
style: {
background: "#fff",
color: "#777",
fontSize: "12px",
fontWeight: 400,
fontFamily: undefined,
cssClass: "apexcharts-xaxis-annotation-label"
}
}
}
]
}
};
series: any = [
{
name: "series-1",
data: [
67,
93,
4,
39,
31,
62,
39,
4,
63,
51,
28,
73,
75,
80,
47,
17,
6,
55,
36,
18,
85,
64,
99,
21,
100,
14,
18,
12,
70,
44,
44,
87,
8,
37,
72,
67,
20,
7,
5,
33,
36,
41,
30,
30,
88,
31,
47,
77,
74,
35
]
}
];
}
</script>
You also need to enable
chart: {
selection: {
enabled: true
}
}
This was not mentioned in the docs which have been corrected now: https://apexcharts.com/docs/options/chart/toolbar/#selection
Currently, I am working on apex bar chart, wanted to assign list of mapState data into apex series data.
Below is the code:
<script>
import { mapState } from 'vuex';
export default {
data: () => ({
series: [{
name: 'Completed',
data: [44, 55, 57, 58, 56, 61, 58, 63, 60, 66, 67, 62]
}, {
name: 'Total',
data: [100, 90, 101, 100, 98, 87, 105, 97, 114, 94, 112, 100]
}]
}),
computed: {
...mapState(['userAssignmentProgessTotal','userAssignmentProgessCompleted']),
},
}
</script>
mapState value:
userAssignmentProgessTotal: [1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]
userAssignmentProgessCompleted: [45, 29, 32, 17, 1, 13, 12, 10, 8, 8, 8, 8]
And I wanted to assign like below:
series: [{
name: 'Completed',
data: this.userAssignmentProgessTotal
}, {
name: 'Total',
data: this.userAssignmentProgessCompleted
}]
but getting error as:
Error in data(): "TypeError: Cannot read property 'userAssignmentProgessTotal' of undefined"
I am very new to vuex as well as vuejs. Apologies if I haven't described well. Thanks
Screenshot:
[1] If you want the series to be reactive ie. keep changing / updating when
userAssignmentProgessTotal or userAssignmentProgessCompleted
changes, make series a computed property instead of data property
import { mapState } from 'vuex';
export default {
computed: {
...mapState([
'userAssignmentProgessTotal',
'userAssignmentProgessCompleted'
]),
series () {
return [{
name: 'Completed',
// If `userAssignmentProgessTotal` is any falsy value it will return the default array else will return `userAssignmentProgessTotal`
data: this.userAssignmentProgessTotal || [44, 55, 57, 58, 56, 61, 58, 63, 60, 66, 67, 62]
}, {
name: 'Total',
data: this.userAssignmentProgessCompleted || [100, 90, 101, 100, 98, 87, 105, 97, 114, 94, 112, 100]
}]
}
}
}
[2] If you want to manually update series, make a method to update
series
import { mapState } from 'vuex';
export default {
data () {
return {
series () {
return [{
name: 'Completed',
data: [44, 55, 57, 58, 56, 61, 58, 63, 60, 66, 67, 62]
}, {
name: 'Total',
data: [100, 90, 101, 100, 98, 87, 105, 97, 114, 94, 112, 100]
}]
}
}
},
computed: {
...mapState([
'userAssignmentProgessTotal',
'userAssignmentProgessCompleted'
])
},
methods: {
updateSeries () {
this.$set(this.series, 0, { name: this.series[0].name, data: this.userAssignmentProgessTotal })
this.$set(this.series, 1, { name: this.series[1].name, data: this.userAssignmentProgessCompleted })
}
},
mounted () {
// call dispatches to fetch data
// ...
// call the method in mounted to update series when component loads
// or else whenever you want to update series
this.updateSeries()
}
}
I want to for loop the labels and data so I'll never use this again labels: [this.transaction_per_day[0].Day... and data: [this.transaction_per_day[0].Amount.... I just realized when the user transacts on the next day, the data will not show in the bar graph. The problem is when I change the index into i inside the bracket instead of 0,1,2,3. It only displays the first index which is the 0. Can somebody help regarding my problem? Here's my code
retrieveTransactionPerDay : function() {
var self = this
axios.post(this.urlRoot + this.api + "retrieve_transaction_per_day.php")
.then(response => {
console.log(response);
vm.transaction_per_day = response.data
for(var i = 0; i < this.transaction_per_day.length; i++) {
var ctxChart = self.$refs.myChart.getContext('2d')
var myChart = new Chart(ctxChart, {
type: 'bar',
data: {
labels: [this.transaction_per_day[0].Day, this.transaction_per_day[1].Day, this.transaction_per_day[2].Day, this.transaction_per_day[3].Day],
datasets: [{
label: 'Transaction per day',
data: [this.transaction_per_day[0].Amount, this.transaction_per_day[1].Amount, this.transaction_per_day[2].Amount, this.transaction_per_day[3].Amount],
backgroundColor: [
'rgba(54, 162, 235, 1)',
'rgba(255, 206, 86, 1)',
'rgba(75, 192, 192, 1)',
'rgba(255, 99, 132, 1)'
],
borderColor: [
'rgba(54, 162, 235, 1)',
'rgba(255, 206, 86, 1)',
'rgba(75, 192, 192, 1)',
'rgba(255, 99, 132, 1)'
],
borderWidth: 1
}]
},
options: {
title : {
display : true,
text : "TRANSACTION GRAPH",
fontFamily: "sans-serif",
fontSize: 18
},
}
});
}
}).catch(e => {
console.log(e)
});
},
You can remove the for loop and use Array.map to get the label and data
vm.transaction_per_day = response.data
var myChart = new Chart(ctxChart, {
type: 'bar',
data: {
labels: vm.transaction_per_day.map(item => item.Day),
datasets: [{
label: 'Transaction per day',
data: vm.transaction_per_day.map(item => item.Amount),
backgroundColor: [
'rgba(54, 162, 235, 1)',
'rgba(255, 206, 86, 1)',
'rgba(75, 192, 192, 1)',
'rgba(255, 99, 132, 1)'
],
borderColor: [
'rgba(54, 162, 235, 1)',
'rgba(255, 206, 86, 1)',
'rgba(75, 192, 192, 1)',
'rgba(255, 99, 132, 1)'
],
borderWidth: 1
}]
},
options: {
title: {
display: true,
text: "TRANSACTION GRAPH",
fontFamily: "sans-serif",
fontSize: 18
},
}
});