Doesn't work with barcharts #23

Activity

1. lukbukkit

   added

   bugSomething isn't workingSomething isn't working

   on Jan 23, 2023
2. lukbukkit commented on Jan 23, 2023

   

   lukbukkit

   on Jan 23, 2023

   Owner

   More actions

   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?
3. DGollings commented on Jan 23, 2023

   

   DGollings

   on Jan 23, 2023

   Last edited by DGollings

   Author

   More actions

   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)

   
4. lukbukkit commented on Jan 26, 2023

   

   lukbukkit

   on Jan 26, 2023

   Owner

   More actions

   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.
5. stklcode commented on Jan 27, 2023

   

   stklcode

   on Jan 27, 2023

   Last edited by stklcode

   More actions

   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>
6. Jonas096 commented on Mar 26, 2024

   

   Jonas096

   on Mar 26, 2024

   More actions

   Is there any updates to this issue? We are facing this issue after upgrading chartist.
7. lukbukkit commented on Mar 30, 2024

   

   lukbukkit

   on Mar 30, 2024

   Owner

   More actions

   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.
8. Jonas096 commented on Apr 2, 2024

   

   Jonas096

   on Apr 2, 2024

   More actions

   @lukbukkit thanks for the answer.
9. emilyDZC commented on Apr 30, 2024

   

   emilyDZC

   on Apr 30, 2024

   More actions

   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.