How to show label when mouse over bar

Question

I made a Bar chart by chartist.js.

Now I want to add some listening event on the bars.

How can I do to let label show up when mouse over the bar?

Emissive

Answer 1

You have 2 options -

Option 1

---

There is a tooltip plugin that you could use. You can find it here - https://github.com/Globegitter/chartist-plugin-tooltip

Once you add the CSS and JS files, you should be able to call the plugin like this - Chartist.plugins.tooltip()

Here is an example from their Plugins page -

var chart = new Chartist.Line('.ct-chart', {
  labels: [1, 2, 3],
  series: [
    [
      {meta: 'description', value: 1 },
      {meta: 'description', value: 5},
      {meta: 'description', value: 3}
    ],
    [
      {meta: 'other description', value: 2},
      {meta: 'other description', value: 4},
      {meta: 'other description', value: 2}
    ]
  ]
}, {
  low: 0,
  high: 8,
  fullWidth: true,
  plugins: [
    Chartist.plugins.tooltip()
  ]
});

This will be the easier and the better option.

Option 2

---

If you want to do something by yourself, you can bind mouseover and mouseout events on draw event's callback -

var data = {
  labels: ['W1', 'W2', 'W3', 'W4', 'W5', 'W6', 'W7', 'W8', 'W9', 'W10'],
  series: [
    [1, 2, 4, 8, 6, -2, -1, -4, -6, -2]
  ]
};

var options = {
  high: 10,
  low: -10,
  axisX: {
    labelInterpolationFnc: function(value, index) {
      return index % 2 === 0 ? value : null;
    }
  }
};

var chart = new Chartist.Bar('.ct-chart', data, options);

// Based on ty's comment
chart.on('created', function(bar) {
  $('.ct-bar').on('mouseover', function() {
    $('#tooltip').html('<b>Selected Value: </b>' + $(this).attr('ct:value'));
  });

  $('.ct-bar').on('mouseout', function() {
    $('#tooltip').html('<b>Selected Value:</b>');
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/chartist.js/0.9.5/chartist.min.js"></script>
<link href="https://cdn.jsdelivr.net/chartist.js/0.9.5/chartist.min.css" rel="stylesheet" />
<div id="tooltip"><b>Selected Value:</b>
</div>
<div class="ct-chart"></div>

UPDATE: Updated the code as per ty's comment

Darryl

Awesome ! That's what I want. – Fuchsia

Im using meteor and trying to use your code on a line chart... but console.log($(this).attr('ct:value')); is undefined any ideas? – Withers

Nice solution Ashwin. Would it be possible to to label what red color horizontal bar is? – Passional

In option #2, you define addedEvents but never change its value. This means if you are charting 50 items, you will bind up to 50 events to each point! A cleaner, more efficient approach would be to use chart.on('created', function() { ...}, which is called exactly once, and remove addedEvents. – Rudolfrudolfo

@EthanWaldie use element.GetAttribute("ct:value"); Stop using jquery everywhere. – Culpepper

Any idea how to achieve option1 with retyped.chartist ? – Culpepper