Highcharts customize shared tooltip

by Kieran Dang

HTML

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>

<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>

JavaScript

$(function() {
  $('#container').highcharts({
    chart: {
      zoomType: 'xy'
    },
    title: {
      text: 'Average Monthly Temperature and Rainfall in Tokyo'
    },
    subtitle: {
      text: 'Source: WorldClimate.com'
    },
    xAxis: [{
      categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
        'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'
      ],
      crosshair: true
    }],
    yAxis: [{ // Primary yAxis
      labels: {
        format: '{value}°C',
        style: {
          color: Highcharts.getOptions().colors[1]
        }
      },
      title: {
        text: 'Temperature',
        style: {
          color: Highcharts.getOptions().colors[1]
        }
      }
    }, { // Secondary yAxis
      title: {
        text: 'Rainfall',
        style: {
          color: Highcharts.getOptions().colors[0]
        }
      },
      labels: {
        format: '{value} mm',
        style: {
          color: Highcharts.getOptions().colors[0]
        }
      },
      opposite: true
    }],
    tooltip: {
      useHTML: true,
      shared: true,
      formatter: function() {
      
        var points = this.points;
        var len = points.length;
        
        // We have the same key
        var markup = len ? '<span style="font-size: 10px">' + points[0].key + '</span><br/>' : '';

        for (var i = 0; i < len; i += 1) {
        	// Format value y here, Highcharts.numberFormat(this.value, 2);
          var val = (points[i].y).toFixed(2);
          //var yAxis = points[i].series.yAxis;

					// \u25CF circle with series name
          markup += '<span style="color:' + points[i].series.color + '">\u25CF</span> ' + points[i].series.name + ' in <b>' + points[0].key + '</b>: <span style="color:' + points[i].series.color + '">' + val + '</span><br/>';
        }

        return markup;
      }
    },
    legend: {
      layout: 'vertical',
      align: 'left',
      x: 120,
      verticalAlign: 'top',
      y: 100,
      floating: true,
      backgroundColor:...