Doesn't work with barcharts #23
Comments
|
Hello, thanks for reporting the issue. Barcharts should be supported and work with tooltips, but maybe there's a bug. |
|
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. |
|
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 :)
The text was updated successfully, but these errors were encountered: