109
rated 0 times
[
113]
[
4]
/ answers: 1 / hits: 22538
/ 6 Years ago, tue, august 21, 2018, 12:00:00
I'm trying to add % in my Apexcharts tooltip after the Y value. I'm using vue.js which apexchart does not provide an official documentation for. But I got it to work properly. Here is what I have so far:
data: function () {
return {
apex: null
}
},
// this is the code that handles the chart, there is no official documentation for apexcharts with vue.js but there is with javascript
//https://apexcharts.com/docs/installation/
methods: {
init: function() {
this.apex = new ApexCharts(this.$refs.barchart, {
chart: {
type: 'line',//defines the type of chart
height:400,
animations: {
enabled: true,
easing: 'easeinout',
speed: 800,
animateGradually: {
enabled: true,
delay: 50
},
dynamicAnimation: {
enabled: true,
speed: 800
}
},
toolbar: {
show: true,
tools: {
download: true,
selection: false,
zoom: false,
zoomin: true,
zoomout: true,
pan: true,
reset: true
},
autoSelected: 'zoom'
},
},
stroke: {
width: 3, //thickness of the lines
curve: 'smooth'//roundness of the lines
},
series: [{
name: this.bar1name,
data: [28 , 29, 33, 30, 26, this.bar1number2, this.bar1number1]//the last 2 variables are tied to the bars, try changing the variable above at their source
},
{
name: this.bar2name,
data: [12, 11, 14, 26, 28, this.bar2number2, this.bar2number1]
},
{
name: this.bar3name,
data: [32, 41, 40, 44, 47, this.bar3number2, this.bar3number1]
},
{
name: this.bar4name,
data: [48, 41, 33, 37, 35, this.bar4number2, this.bar4number1]
},
{
name: this.bar5name,
data: [52, 56, 60, 54, 52, this.bar5number2, this.bar5number1]
},
{
name: this.bar6name,
data: [32, 27, 38, 48, 30, this.bar6number2, this.bar6number1]
}],
colors:[this.chart1color, this.chart2color, this.chart3color,this.chart4color,this.chart5color,this.chart6color], //line color
markers: {
colors: [this.chart1color, this.chart2color, this.chart3color,this.chart4color,this.chart5color,this.chart6color], //dot color
hover:{size:6} //dot size
},
xaxis: {
type:'datetime',
categories: ['Jan 2018', 'Feb 2018', 'Mar 2018', 'Apr 2018', 'May 2018', 'Jun 2018', 'Jul 2018'],
axisTicks: {
show: true,
borderType: 'solid',
color: '#78909C',
height: 6,
},
},
yaxis: {
tickAmount: 5,
min: 0,
max: 100,//sets the max to the y axis
},
grid: {
show: true,
borderColor: '#e8e8e8',
strokeDashArray: 0,
position: 'back',
xaxis: {
lines: {
show: true,
offsetX: 10,
offsetY: 10,
}
},
yaxis: {
lines: {
show: true,
offsetX: 10,
offsetY: 10
},
tickAmount: 6,
min: 0,
max: 100,
},
padding: {
top: 0,
right: 0,
bottom: 0,
left: 0
},
},
tooltip: {
enabled: true,
followCursor: true,
x: {
format: 'dd MMM',
formatter: undefined,
},
yaxis: {
labels: {
formatter: (value) => { return val + % },
},
},
},
}).render()
}
},
mounted() {
this.init();//mounted makes the chart apear
},
updated() {
this.init();//updated updates the chart after every change
}
}
i tried using the formatter to change the outcome like this but it doesnt seem to work.
tooltip: {
enabled: true,
followCursor: true,
x: {
format: 'dd MMM',
formatter: undefined,
},
yaxis: {
labels: {
formatter: (value) => { return val + % },
},
},
},
any help or references is greatly appreciated, thank you.
also stack wont let me post a new tag for apex charts so heres the official documentation. Apexcharts
More From » vue.js
