Two different tooltip in highcharts sparkline

Question

I'm working with sparkline, but I have a two differents graphs of sparkline: one is a quarter profit of company (EUR), but the other is a difference between the present year with before and it's show with percent (%).

Show the code:

    
Highcharts.SparkLine = function(a, b, c) {
  var hasRenderToArg = typeof a === 'string' || a.nodeName,
    options = arguments[hasRenderToArg ? 1 : 0],
    defaultOptions = {
      chart: {
        renderTo: (options.chart && options.chart.renderTo) || this,
        backgroundColor: null,
        borderWidth: 0,
        type: 'bar',
        margin: [2, 0, 2, 0],
        width: 120,
        height: 20,
        style: {
          overflow: 'visible'
        },

        // small optimalization, saves 1-2 ms each sparkline
        skipClone: true
      },
      title: {
        text: ''
      },
      credits: {
        enabled: false
      },
      xAxis: {
        labels: {
          enabled: false
        },
        title: {
          text: null
        },
        startOnTick: false,
        endOnTick: false,
        tickPositions: []
      },
      yAxis: {
        endOnTick: false,
        startOnTick: false,
          min: -200,
            max: 200,
        labels: {
          enabled: false
        },
        title: {
          text: null
        },
        tickPositions: [0]
      },
      legend: {
        enabled: false
      },
      tooltip: {
        hideDelay: 0,
        outside: true,
        shared: true
      },
      plotOptions: {
        series: {
          animation: false,
          lineWidth: 1,
          shadow: false,
          states: {
            hover: {
              lineWidth: 1
            }
          },
          marker: {
            radius: 1,
            states: {
              hover: {
                radius: 2
              }
            }
          },
          fillOpacity: 0.25
        },
        column: {
          negativeColor: '#910000',
          borderColor: 'silver'
        },
         bar: {
            negativeColor: '#910000',
            borderColor: 'silver',
             tooltip: {
                 
             },
          }
      }
    };

  options = Highcharts.merge(defaultOptions, options);

  return hasRenderToArg ?
    new Highcharts.Chart(a, options, c) :
    new Highcharts.Chart(options, b);
};

var start = +new Date(),
  $tds = $('td[data-sparkline]'),
  fullLen = $tds.length,
  n = 0;

function doChunk() {
  var time = +new Date(),
    i,
    len = $tds.length,
    $td,
    stringdata,
    arr,
    data,
    chart;

  for (i = 0; i < len; i += 1) {
    $td = $($tds[i]);
    stringdata = $td.data('sparkline');
    arr = stringdata.split('; ');
    data = $.map(arr[0].split(', '), parseFloat);
    chart = {};

    if (arr[1]) {
      chart.type = arr[1];
    }
    $td.highcharts('SparkLine', {
      series: [{
        data: data,
        pointStart: 0
      }],
      tooltip: {
        headerFormat: '<span style="font-size: 13px">' + $td.parent().find('th').html() + ', T{point.x}:</span><br/>',
        pointFormat: '<b>{point.y}</b>€'
      },
      chart: chart
    });

    n += 1;
  }
}
doChunk();

[Sorry, I can't post image by reputation. Click link to see][1]

My question is: I think that my problem is the tooltip, that use the same for two graphs and I want that the first sparkline is like now (with Quarters and EUR) but the second, I want to show me the percentage (%).

Anybody knows how to fix it?

THANKS [1]: https://i.stack.imgur.com/kDl16.png

How is possible set two yaxis? In my case, I need a one y axis for the bar line (-200 to 200) and the other for columns or areas that is more different because are economic values.

yAxis: [{
            endOnTick: false,
            startOnTick: false,
            labels: {
                enabled: false
            },
            title: {
                text: null
            },
            tickPositions: [0],
            min: -100,
            max: 100,      
        }],

Answer 1

You can use tooltip.formatter() callback function to display content conditionally based on point, series, or chart information:

tooltip: {
  formatter: function() {
    const point = this,
          type = point.series.type;

    return `
            <span style="font-size: 13px">${td.parentElement.querySelector('th').innerText}, T${point.x}:</span><br/>
            <b>${point.y}</b>${type === "column" ? '€' : '%'}
        `;
  }
}

Demo: https://jsfiddle.net/BlackLabel/qdo2fk9c/
API: https://api.highcharts.com/highcharts/tooltip.formatter