Open DGollings opened 1 year ago
Hello, thanks for reporting the issue. Barcharts should be supported and work with tooltips, but maybe there's a bug. Could you post some example code that doesn't work?
Hi,
Created one here
Although for whatever reason enabling linechart breaks everything. But the barchart doesn't work so I guess that's a good enough example
Anyway, 'proof' LineChart works locally (excuse the bad/mismatched styling, just dropped the code in a random project)
Thanks for providing an example. I'm currently heavily occupied with projects for university. Maybe I can find a few spare hours in the next few weeks, but I can't guarantee it. Starting in March, I've got more resources to fix issues on GitHub. In the meantime maybe @stklcode can help you out, as he authored the most recent pull request #20. Otherwise if the issue is severe for you, I would recommend to downgrading to an older versions of chartist.
At the current state there is no real modular integration. I don't know why it actually works for line charts the way it's integrated in the example.
Non-Modular integration for BarCharts works fine, e.g. using the very same chart from the example:
https://stackblitz.com/edit/js-cnnsqb?file=package.json,index.html,index.js
<html>
<head>
<title>Chartist test</title>
<script src="node_modules/chartist/dist/index.umd.js"></script>
<script src="node_modules/chartist-plugin-tooltips-updated/dist/chartist-plugin-tooltip.min.js"></script>
<link rel="stylesheet" href="node_modules/chartist/dist/index.css">
<link rel="stylesheet" href="node_modules/chartist-plugin-tooltips-updated/dist/chartist-plugin-tooltip.css">
</head>
<body>
<div id="chart" style="height: 50vh"></div>
<script>
new Chartist.BarChart(
'#chart',
{
labels: ['Q1', 'Q2', 'Q3', 'Q4'],
series: [
[800000, 1200000, 1400000, 1300000],
[200000, 400000, 500000, 300000],
[100000, 200000, 400000, 600000]
]
},
{
stackBars: true,
axisY: {
labelInterpolationFnc: (value) => +value / 1000 + 'k'
},
plugins: [ Chartist.plugins.tooltip() ]
}
).on('draw', (data) => {
if (data.type === 'bar') {
data.element.attr({
style: 'stroke-width: 30px'
});
}
});
</script>
</body>
</html>
Is there any updates to this issue? We are facing this issue after upgrading chartist.
Hi, @Jonas096. As of now, there are no updates on this issue. Currently, I don't have the capacity to work on the issue. I'm sorry about that.
@LukBukkit thanks for the answer.
I found a workaround for anyone else who's trying to do this. I'm using chartist in VueJS but I don't think it matters, it's just javascript.
Here's my code:
this.chart.on('draw', (data) => {
if (data.type === 'bar') {
// Add mouseover event listener to the bar or point
data.element._node.onmouseover = () => {
// Find the tooltip div and add the 'tooltip-show' class
const tooltip = document.querySelector('.chartist-tooltip');
if (tooltip) {
tooltip.classList.add('tooltip-show');
// Create a new span element for the tooltip value
const valueSpan = document.createElement('span');
valueSpan.classList.add('chartist-tooltip-value');
// Set the text of the span to the value of the bar or point
valueSpan.textContent = ' ' + data.value.y + 'kW';
// Append the span to the tooltip div
tooltip.appendChild(valueSpan);
// Get the bounding box of the bar or point
const bbox = data.element._node.getBoundingClientRect();
// Set the position of the tooltip to the top of the bar or point
tooltip.style.left = (bbox.left + bbox.right) / 2 - tooltip.offsetWidth / 2 + 'px'; // Centres the tooltip horizontally
tooltip.style.top = bbox.top - tooltip.offsetHeight - 15 + 'px'; // I needed to raise this by 15px to stop overlap. It should hover over the top of the bar (or segment, if it's a stacked bar chart)
}
};
// Add mouseout event listener to the bar or point
data.element._node.onmouseout = () => {
// Find the tooltip div and remove the 'tooltip-show' class
const tooltip = document.querySelector('.chartist-tooltip');
if (tooltip) {
tooltip.classList.remove('tooltip-show');
// Remove the tooltip value span
const valueSpan = tooltip.querySelector('.chartist-tooltip-value');
if (valueSpan) {
tooltip.removeChild(valueSpan);
}
}
}
You can also add a span element for the meta value in the same way.
Hi, testing it out on chartist v1 and line charts work, but bar charts don't seem to?
There's no 'official' (as in, in your README.md) example of a barchart with tooltips so not sure if bug or feature :)