Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Doesn't work with barcharts #23

Open
DGollings opened this issue Jan 22, 2023 · 8 comments
Open

Doesn't work with barcharts #23

DGollings opened this issue Jan 22, 2023 · 8 comments
Labels
bug Something isn't working

Comments

@DGollings
Copy link

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 lukbukkit added the bug Something isn't working label Jan 23, 2023
@lukbukkit
Copy link
Owner

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
Copy link
Author

DGollings commented Jan 23, 2023

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)

image

@lukbukkit
Copy link
Owner

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
Copy link

stklcode commented Jan 27, 2023

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
Copy link

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

@lukbukkit
Copy link
Owner

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
Copy link

Jonas096 commented Apr 2, 2024

@lukbukkit thanks for the answer.

@emilyDZC
Copy link

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug Something isn't working
Projects
None yet
Development

No branches or pull requests

5 participants