Search code examples
javascriptangularjshighchartshighcharts-ng

How to call Highcharts tooltip formatter function from outside the config object?


so I have an interesting problem.

Here is where the formatter function is inside of the chart config object:

In HighCharts Controller

vm.config = {
    options: {
        ....
        chart: {
            ....
        },
        navigator: {
            ....
        },
        tooltip: {
            shared: true,
            useHTML: true,
            backgroundColor: null,
            borderWidth: 0,
            shadow: false,
            formatter: function(tooltipObj) {
                return formatTooltip(tooltipObj, this.points);
            }
        },
        ....

I would love to be able to call the formatTooltip function from another place in my app. However, 1) How do I do that? and 2) How do I pass in the tooltipObj?

For example inside of my alertFactory I want the mouseover event that happens when the user hovers over a plotBand, to send more information into the tooltip:

In AlertsFactory

var formatPlotBand = _.curry((color, alert) => {
    return {
        color : color,
        from  : alert.start_epoch * 1000,
        to    : alert.end_epoch * 1000,
        id    :'alert-plotband',
        events: {
            mouseover: function (e) {
                /*
                    Somehow from here call the formatTooltip function
                    in the highCharts Controller.
                */
            },
            mouseout: function (e) {
                ....

Solution

  • var formatPlotBand = _.curry((color, alert) => {
    return {
        color : color,
        from  : alert.start_epoch * 1000,
        to    : alert.end_epoch * 1000,
        id    :'alert-plotband',
        events: {
            mouseover: function (e) {
                vm.config.options.tooltip.formatter(tooltipObj);
                chart.tooltip.refresh([chart.series[0].points[i]])
            },
            mouseout: function (e) {
                ....
    

    I don't know if vm is what you're calling your chart so replace chart in the code with whatever variable name you're using.