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
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 am trying to draw a candlestick chart using vue.js and vue-google-charts.
What I have done works with other charts (line, column, pie...) but not with candlesticks.
What is wrong in the code bellow?
<template>
<GChart
type="CandlestickChart"
:settings="chartsLib"
:data="chartData"
:options="chartOptions"
/>
</template>
<script>
import { GChart } from 'vue-google-charts'
export default {
components: {
GChart
},
data () {
return {
chartsLib: {packages: ['corechart']},
chartData: [
['Mon', 20, 28, 38, 45],
['Tue', 31, 38, 55, 66],
['Wed', 50, 55, 77, 80],
['Thu', 77, 77, 66, 50],
['Fri', 68, 66, 22, 15]
],
chartOptions: {
legend:'none'
}
}
}
}
</script>
when providing the data, you need to include the column headings...
chartData: [
["x", "Low", "Close", "Open", "High"], // <-- column headings
['Mon', 20, 28, 38, 45],
['Tue', 31, 38, 55, 66],
['Wed', 50, 55, 77, 80],
['Thu', 77, 77, 66, 50],
['Fri', 68, 66, 22, 15]
],
I'm plotting a HighCharts heatmap of a wafer with around 50~70k points (it's like a CPU/processor silicon wafer). I need to put horizontal and vertical gridlines visible on the map, so that our engineers can easily figure out what's going on with the actual unit.
I have two concerns:
Horizontal gridlines are already OK, but the vertical gridlines are not drawn or visible. I thought, I just need to set gridZIndex=4. Kindly see image below - it should be drawn based on xAxis.tickPositions values (similar to yAxis)
I put some color options I found, but none of them could change the grid's color.
So far this is my code:
var option = {
chart: {
type: 'heatmap',
zoomType: 'xy',
},
boost: {
useGPUTranslations: true
},
title: {
text: chrt_title,
align: 'left',
x: 0,
style: {
fontSize: '12px',
}
},
exporting: {
buttons: {
contextButton: {
menuItems: [
'viewFullscreen', 'downloadPNG', 'downloadXLS'
]
}
},
enable: true,
},
xAxis: {
title: {
text: null
},
labels: {
enabled: false,
},
tickPositions: [1, 19, 43, 67, 91, 115, 139, 163, 183],
gridZIndex: 4, // DOESN'T WORK
gridLineDashStyle: 'Dash',
gridLineWidth: 1, // DOESN'T WORK
lineColor: 'red',
minorTickColor: 'red',
tickColor: 'red'
},
yAxis: {
title: {
text: null
},
reversed: true,
labels: {
enabled: false,
},
tickPositions: [1, 82, 116, 174, 272, 370, 428, 462, 544]
gridZIndex: 4, // ONLY PUT THIS AND WORKS ALREADY
gridLineDashStyle: 'Dash', // THIS WORKS TOO (Dot,Solid,etc)
lineColor: 'red',
minorTickColor: 'red',
tickColor: 'red'
},
colorAxis: {
stops: colrstops,
min: minval,
max: maxval,
startOnTick: true,
endOnTick: true,
labels: {
format: '{value}',
style: {
fontSize: '8px',
fontFamily: 'Verdana, sans-serif'
}
}
},
series: [{
boostThreshold: 100,
borderWidth: 0,
nullColor: '#ffffff',
tooltip: {
headerFormat: chrt_title + '<br/>',
pointFormat: 'RB{point.y} SL{point.x} <b>{point.value}</b>'
},
turboThreshold: Number.MAX_VALUE, // #3404, remove after 4.0.5 release
data: data
}]
}
As you can see, both xAxis and yAxis have gridZIndex = 4, gridLineDashStyle = 'Dash', but only the yAxis that gives the horizontal gridlines, no luck for xAxis (assuming this is where need to set the vertical gridlines) :(
the only similar question i found reg vertical gridlines is this one:
Highcharts: xAxis with vertical gridlines
but I tried to put the gridLineWidth=1, still nothin's happening T-T please help. thanks very much.
Update:
I temporarily replaced my option{} based on #ppotaczek sample but vertical gridlines still did not appeared.
Then I played with my own option{}, tried to add min and max in xAxis, and tried to temporarily removed my dynamic data and use #ppotaczek sample, the layout remains the same (no vertical gridlines)..
Also thought it has something to do with the version i'm using..? it's 9.0.1 - so I tried to update to latest 9.1.1, but also have same result.
var option = {
chart: {
type: 'heatmap',
},
xAxis: {
tickPositions: [1, 19, 43, 67, 91, 115, 139, 163, 183],
min: 1,
max: 183,
gridZIndex: 4, // DOESN'T WORK
gridLineDashStyle: 'Dash',
gridLineWidth: 1, // DOESN'T WORK
lineColor: 'red',
minorTickColor: 'red',
tickColor: 'red'
},
yAxis: {
title: {
text: null
},
reversed: true,
labels: {
enabled: false,
},
tickPositions: [1, 82, 116, 174, 272, 370, 428, 462, 544],
gridLineDashStyle: 'Dash', // THIS WORKS TOO (Dot,Solid,etc)
lineColor: 'red',
minorTickColor: 'red',
tickColor: 'red',
},
colorAxis: {},
series: [{
data: [
[10, 0, 1],
[20, 1, 5],
[30, 1, 5],
],
}]
}
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()
}
}