I am currently utilizing Chartist alongside VueJS and I am facing a challenge in accessing data within my chart. My objective is to retrieve information about the index of my click when interacting with the chart. While I am successful in obtaining this data, I am encountering difficulty in passing it to Vue itself.
Here is an excerpt from my current code:
data() {
return {
monthIndex: 0,
chartData: {
labels: [],
series: [[], []]
},
/* other chart settings that are excluded */
chartEventHandlers: [
{
event: "draw",
fn(data) {
if (data.type === "bar") {
data.element.animate({
y2: {
begin: data.index * 40,
dur: "0.3s",
from: data.y1,
to: data.y2,
easing: "easeOutQuad"
},
opacity: {
begin: data.index * 40,
dur: "0.3",
from: 0,
to: 1,
easing: "easeOutQuad"
}
});
data.element._node.onclick = evt => {
console.log(data.axisX.ticks[data.index]);
// How can I assign this value to monthIndex??
};
//
}
}
}
]
};
}
As evident here:
data.element._node.onclick = evt => {
console.log(data.axisX.ticks[data.index]);
};
While I am able to display the correct value in the console, my aim is to find a solution for assigning
monthIndex = data.axisX.ticks[data.index]
Nevertheless, due to the absence of monthIndex in the function's scope, direct assignment to that variable proves challenging. How should I approach resolving this issue? My goal is to have monthIndex reflected on the html View so that it updates each time I interact with a different section of the chart.