Have all label in Chartjs be at fixed positions

Question

Been searching for for this question for a little while to no avail. I want a way to modify the positions of specific labels. For example, I want the second label on the chart to be 'left-aligned' so that the tooltip that shows isn't centered on the line. I figured this was not possible, or at least not worth the work, so what I'd actually like to do is render some sort of div that instead displays all labels/tooltips inside of that div.

Problem: I use leading/trailing nodes, so I use workarounds to alter the visible positions of the nodes. This, unfortunately, also causes the side labels to be cut off. I want to be able to adjust their positions. I figure an easier method would be to somehow specify a class name on the tooltip and then position that tooltip using other means.

Summary: I want all hover tooltips in my chart to show in the same position, regardless of where in the chart they exist.

Edit: As you can see from the image below, the end node label is getting cut off from the rest of the chart. Technically, the very left label will auto-align itself so it pushes it's label onto the visible area of the chart. However, because I have a phantom node (Allowing for a leading line) the 'first' node seen is actually the second, which stops it from doing the right alignment.

Ideally, what I would like is for the labels to show up in a different, specified position.

Could you add a picture showing where the tooltips should show? I have a fair idea of what you want, but a picture would make it clear. Cheers! — potatopeelings
@potatopeelings - Added the image of the issue I want to fix, didn't have time to create a demo of what I'm trying to do... Let me know if that makes sense. — Rockster160

Rockster160 Rockster160 · Accepted Answer · 2015-10-06T16:36:06

Put some time in and came up with a solution.

Charts gives us a .getPointsAtEvent() method, so using that, I was able to grab the data node at the hover location, get it's label, and then display that label at a separate position.

$('.chart').each(function() {
  var chart = $(this).first().children('canvas')[0],
      label = $(chart).parents('.chart-container').find('.label-container').find('span');
  $(chart)
    .mousemove(function(evt) {
      var data_nodes = window.Chart[chart.id].getPointsAtEvent(evt);
      if (data_nodes.length > 0) {
        label.html(data_nodes[0].label);
        label.addClass('label-tooltip');
      } else {
        label.html('');
        label.removeClass('label-tooltip');
      }
    })
    .mouseleave(function() {
      label.html('');
      label.removeClass('label-tooltip');
    })
})

Grab each chart, iterate through them and find the canvas and the extra div that I'm using to store the tooltip (.label-container). Add the mousemove and mouseleave listeners to the chart. When the mouse moves, find the data nodes that it's over, grab the first one (the very left one, even if multiple get selected) get the label from that node, then replace the label's html with that label. While the label is shown, I format it with CSS, so I also add a class label-tooltip to the label that styles it, otherwise it's just hidden.

Result:

Have all label in Chartjs be at fixed positions

1 Answers