jQuery addClass example

Change class name on click in jQuery

by core972

HTML

<div id="container"></div>
   <script src="https://code.highcharts.com/maps/highmaps.js"></script>
  <script src="https://code.highcharts.com/maps/modules/drilldown.js"></script>
    <script src="https://code.highcharts.com/maps/modules/data.js"></script>

CSS

#container {
	      height: 400px; 
	      width: 400px; 
	      margin: 0 auto; 
      }
      .loading {
	      margin-top: 10em;
	      text-align: center;
	      color: gray;
      }
     .fredTT, .ddTT {
	      padding:4px;
	      border-style:none ;
	      background-color: rgba(255,255,255,1);
	      opacity: 1.0;
	      z-index: 127 !important;
      }

JavaScript

$(function () {
         Highcharts.setOptions({ "lang": { "drillUpText": "&lt; Back to main area" } });
         $('#container').highcharts('Map', {
         "title": {
            "text": "Area 51"
         },
         "tooltip": {
            "headerFormat": "",
            "borderWidth": 0,
            "backgroundColor": "rgba(204,204,204,1)",
            "useHTML": true,
            "formatter": function () { return '<div class="fredTT">' + this.point.name + '<br>' + this.point.xdata + '</div>' }
         },
         "legend": {
            "enabled": false
         },
         "series": [
           {
              "id": "UK0",
              "type": "map",
              "dataLabels": {
                 "enabled": true,
                 "color": "#ffffff",
                 "useHTML": true,
                 "formatter": function () {return this.point.name}
      },
              "data": [
                {
                   "xdata": "Some interesting data",
                   "color": "#ffcccc",
                   "drilldown": "Area_1",
                   "name": "<b>Area 1</b>",
                   "path": "M0,-994L204,-994L203,-480,0,-477z"
                },
                {
                   "xdata": "Some more interesting data",
                   "color": "#ccccff",
                   "drilldown": "Area_2",
                   "name": "<b>Area 2</b>",
                   "path": "M204,-994L455,-994L457,-477,203,-480z"
                }
              ]
           }
         ],
         "drilldown": {
            "series": [
              {
                 "id": "Area_1",
                 "name": "NE Area 1",
                 "type": "map",
                 "dataLabels": {
                    "enabled": true,
                    "color": "#000000",
                    "useHTML": true,
                    "formatter": function () { return '<b>' + this.point.name + '</b><br>' + this.point.xdata}
                 },
                 "data": [
			           ...