[ChartJS] Tooltip custom Position

[vgross]

Hi there! Thank you for this amazing bundle!

I'm trying to implement a custom position for the toolTip as described here: Position

What would be the best way to do this? Is that possible to add the custom tooltip positioner in the method _onPreConnect of Stimulus?

Any help would be welcome!

[weaverryan]

Hey!

I've never done this before, but it looks like it's 2 steps:

1. Adding the custom "positioner" - e.g. https://www.chartjs.org/docs/latest/configuration/tooltip.html#custom-position-modes - this is a little odd because it only needs to be done ONCE ever for chart.js. So you could even put this code in your app.js file. The disadvantage is that part of chart.js would then be downloaded onto the user's page by default. If you want to run this code lazily, I'd put it into a custom Stimulus controller (marked with fetch: lazy) and put this code into initialize(). I don't think there is harm if multiple instances of the controller are called and this code runs multiple times.

2. Then you need effectively say chart.options.plugins.tooltip.position = 'custom_positioner_value'. That can be done in the chart builder, via $chart->setOptions([ I believe.

Let me know if that works - it might be a nice example to add to the docs!

[vgross]

Thank you for the suggestion!

Unfortunately, I couldn't figure out how to add my positioners; nothing worked.

I tried first to add it to my app.js

import './styles/app.scss';
import { Tooltip } from 'chart.js';

// Create a custom tooltip positioner to put at the bottom of the chart area
Tooltip.positioners.bottom = function(items) {
    const pos = Tooltip.positioners.average(items);
  
    // Happens when nothing is found
    if (pos === false) {
      return false;
    }
  
    const chart = this.chart;
  
    return {
      x: pos.x,
      y: chart.chartArea.bottom,
      xAlign: 'center',
      yAlign: 'bottom',
    };
};

import './bootstrap'; 

That didn't work. So I tried the initialize method as (with and without lazy fetch), I even tried the _onPreConnect method:

import { Controller } from '@hotwired/stimulus';
import { Tooltip } from 'chart.js';

/* stimulusFetch: 'lazy' */
export default class extends Controller {
    initialize() {
        // Create a custom tooltip positioner to put at the bottom of the chart area
        Tooltip.positioners.bottom = function(items) {
            const pos = Tooltip.positioners.average(items);
          
            // Happens when nothing is found
            if (pos === false) {
              return false;
            }
          
            const chart = this.chart;
          
            return {
              x: pos.x,
              y: chart.chartArea.bottom,
              xAlign: 'center',
              yAlign: 'bottom',
            };
        };
    }

    connect() {
        this.element.addEventListener('chartjs:pre-connect', this._onPreConnect);
        this.element.addEventListener('chartjs:connect', this._onConnect);
    }

    disconnect() {
        // You should always remove listeners when the controller is disconnected to avoid side effects
        this.element.removeEventListener('chartjs:pre-connect', this._onPreConnect);
        this.element.removeEventListener('chartjs:connect', this._onConnect);
    }
    _onPreConnect(event) {
         event.detail.options.plugins.tooltip.position = "bottom";
    }

Stimulus is working as the position is set correctly. However, the Tooltip created is not loaded. All the examples above produce the same result.

An Error is thrown when I hover the chart, we can see that the custom positioner isn't there ("nearest" and "average" are the defaults ones):

I tried this positioner code in a standalone js file, and it worked, but no luck otherwise.

Any suggestion?

[weaverryan]

Hmm, what happens if you change the import to this:

import Chart from 'chart.js/auto';

// then below, 
Chart.Tooltip.positioners.bottom = function(items) {

I'm basing this off of the Chart controller, which imports via this /auto. I'm just guessing that, perhaps, the problem is that somehow you're currently adding the positioner successfully... but then the UX Stimulus controller is using a different Tooltip object when it initializes things.

Cheers!

[weaverryan]

Fixed by #870