Doesn't work with barcharts

DGollings commented 1 year ago

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 :)

lukbukkit commented 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?

DGollings commented 1 year ago

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)

lukbukkit commented 1 year ago

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.

stklcode commented 1 year ago

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>

Jonas096 commented 5 months ago

Is there any updates to this issue? We are facing this issue after upgrading chartist.

lukbukkit commented 5 months ago

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.

Jonas096 commented 5 months ago

@LukBukkit thanks for the answer.

emilyDZC commented 4 months ago

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.

lukbukkit / chartist-plugin-tooltip

Doesn't work with barcharts #23