I am attempting to use the apexCharts
javascript library and having trouble implementing the click event I have read the documentation but there's no clear example on how to implement it.
So far I have this code.
var options = {
chart: {
height: 350,
type: 'bar',
},
plotOptions: {
bar: {
dataLabels: {
position: 'top', // top, center, bottom
},
}
},
dataLabels: {
enabled: true,
formatter: function (val) {
return val + "%";
},
offsetY: -20,
style: {
fontSize: '12px',
colors: ["#304758"]
}
},
series: [{
name: 'Inflation',
data: [2.3, 3.1, 4.0, 10.1, 4.0, 3.6, 3.2, 2.3, 1.4, 0.8, 0.5, 0.2]
}],
xaxis: {
categories: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"],
position: 'top',
labels: {
offsetY: -18,
},
axisBorder: {
show: false
},
axisTicks: {
show: false
},
crosshairs: {
fill: {
type: 'gradient',
gradient: {
colorFrom: '#D8E3F0',
colorTo: '#BED1E6',
stops: [0, 100],
opacityFrom: 0.4,
opacityTo: 0.5,
}
}
},
tooltip: {
enabled: true,
offsetY: -35,
}
},
fill: {
gradient: {
enabled: false,
shade: 'light',
type: "horizontal",
shadeIntensity: 0.25,
gradientToColors: undefined,
inverseColors: true,
opacityFrom: 1,
opacityTo: 1,
stops: [50, 0, 100, 100]
},
},
yaxis: {
axisBorder: {
show: false
},
axisTicks: {
show: false,
},
labels: {
show: false,
formatter: function (val) {
return val + "%";
}
}
},
title: {
text: 'Monthly PCB Washout Occurrences, 2018',
floating: true,
offsetY: 320,
align: 'center',
style: {
color: '#444'
}
},
active: {
allowMultipleDataPointsSelection: true,
},
events:{
dataPointSelection: function(event, chartContext, config){
console.log(event);
}
}
}
var chart = new ApexCharts(
document.querySelector("#chart"),
options
);
chart.render();
I tried first the click
event but found out that what I am looking for is the dataPointSelection
method this is when a user clicks the column/bar chart it will return the event or data of the element, any idea how to implement this? any suggestion would be great!
Your configuration for events is misplaced. You need to place events
property inside chart
property like this
chart: {
events: {
dataPointSelection: (event, chartContext, opts) => {
console.log(chartContext, opts);
}
}
}
Here is an updated codepen of your example.