FusionCharts - Customizng Hover effects in Map for entities, markers and marker connectors

Created using FusionCharts Suite XT - www.fusioncharts.com

HTML

<script src="https://cdn.fusioncharts.com/fusioncharts/latest/fusioncharts.js"></script>
<script src="https://cdn.fusioncharts.com/fusioncharts/latest/fusioncharts.maps.js"></script>
<script src="https://cdn.fusioncharts.com/fusioncharts/latest/maps/fusioncharts.world.js"></script>
<script src="https://cdn.fusioncharts.com/fusioncharts/latest/themes/fusioncharts.theme.fusion.js"></script>
<!-- Customizng Hover effects in Map for entities, markers and marker connectors. These attributes are used:

# showEntityHoverEffect set to  1 - to set hover for entities

# showMarkerHoverEffect set to 1 - to set hover for markers
# showMarkerHoverEffect set to "#cccccc"

# showConnectorHoverEffect set to 1 - to set hover for connectors
# connectorHoverColor set to "#f8bd19"
# connectorHoverThickness set to 3 

Hover on entities ,markers and connectors to see the effects
-->
<div id="chart-container">FusionCharts will render here</div>

JavaScript

FusionCharts.ready(function() {
  var wrCoverage = new FusionCharts({
    type: 'world',
    width: '600',
    height: '500',
    dataFormat: 'json',
    renderAt: 'chart-container',
    dataSource: {
      "chart": {
        "caption": "",
        "subcaption": "",
        "numbersuffix": "",
        "includevalueinlabels": "0",
        "labelsepchar": "",
        "markerBgColor": "#843cf7",
        "markerFontSize": "18",
        "markerFontColor": "#FF0000",
        "markerRadius": "10",
        "labelColor": "#000000",
        "showMarkerLabels": "1",
        "showMarkerLabelsfillcolor": "#0000b3",
        "entityfillhovercolor": "#38b8f2",
        "theme": "fusion"
      },
      "annotations": {
        "groups": [{
          "id": "Av Item",
          "items": [{
              "id": "cs",
              "type": "text",
              "fillcolor": "#0075c2",
              "label": "Global Total Sales Past 30 Days",
              "x": "45",
              "y": "380",
              "color": "000000",
              "align": "left"
            },
            {
              "id": "cs",
              "type": "text",
              "fillcolor": "#FF0000",
              "fontSize": "20",
              "text": "Annotations text",
              "x": "230",
              "bold": "1",
              "y": "400",
              "color": "000000",
              "align": "right"
            },
            {
            	"type": "text",
              "text": "This is the first line",
              "fillcolor": "#0000FF",
              "fontSize": "20",
              "bold": "1",
              "x": "140",
              "y": "164"
            }
          ]
        }, ],
      },
      "markers": {
        "items": [{
          "id": "na",
          "shapeid": "circle",
          "x": "150.14",
          "y": "150.9",
          "label": "This is marker label",
          "tooltext": "Custom tooltip",
          "labelpos": "top"
        }]
      }
    }
  }).render();
});