useHTML Title Highchart SemiCircle With Triangle Gauge

by sundaramkumar

HTML

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/highcharts-more.js"></script>
</script>

<div class="wrap">
  <div class="left-col">
    <div id="container" style="height: 186px;  overflow: hidden"></div>
  </div>


  <div class="right-col">
    <div class="gauge-legend">
      <div class="legend-container">
        <div class="legend-item legend-item-high">
          <h4 class="legend-text">Low</h4>
        </div>
        <div class="legend-item legend-item-medium">
          <h4 class="legend-text">Medium</h4>
        </div>
        <div class="legend-item legend-item-low">
          <h4 class="legend-text">High</h4>
        </div>
      </div>
    </div>
  </div>
</div>

CSS

.temp {
  font-size: 18px;
}

.wrap {
  width: 450px;
  overflow: hidden;
}

.left-col {
  float: left;
  width: 400px;
  text-align: center;
}

.f1 {
  padding-top: 20px;
}

.right-col {
  padding-top: 25px;
  float: right;
  width: 200px;
}

.gauge-legend {
  width: 140px;
  height: 200px;
  float: left;
}

.gauge-chart {
  width: 500px;
  float: left;
}

.legend-item {
  width: 110px;
  height: 30px;
  background-color: #f1f1f1;
  font-size: 13px;
  color: #666666;
  border-top: 5px solid;
  text-align: left;
  padding-bottom: 20px;
}

.legend-container {}

.legend-item-high {
  border-top-color: #c5e3f0;
}

.legend-item-medium {
  border-top-color: #00b300;
}

.legend-item-low {
  border-top-color: #037dae;
}

.legend-text {
  margin-left: 5px;
  font-size: 13px;
}

.plan-summary-title {
  margin-top: 15px;
  font-weight: bold;
}

@media screen and (max-width: 374px) {
  .gauge-legend {
    display: none !important;
  }
  .left-col {
    float: left;
  }
  .wrap {}
}

@media screen and (min-width: 375px) and (max-width: 768px) {
  .gauge-legend {
    display: none !important;
  }
  .wrap {
    width: 375px;
    height: 350px;
  }
}

@media screen and (min-width: 769px) and (max-width: 1024px) {
  .legend-container {}
  .gauge-legend {
    display: none !important;
  }
}

JavaScript

$(function() {
  $("#container").highcharts({
    "chart": {
      "height": 400,
      "renderTo": "container",
      "plotBackgroundColor": null,
      "plotBackgroundImage": null,
      "plotBorderWidth": 0,
      "plotShadow": false,
      "backgroundColor": "transparent"
    },
        "colors":['#e46c00','yellow','green'],
    "credits": {
      "enabled": false
    },
    "tooltip": {
      "enabled": false
    },

/*     "title": {
      "useHtml": true,
      "align": "center",
      "verticalAlign": "top",
      "y": 125,
      "useHtml": true
    },
      "subtitle": {
      "useHtml": true,
      
      "align": "center",
      "verticalAlign": "top",
      "y": 175,
      "useHtml": true
    }, */
    
    "pane": {
      "center": ["50%", "50%"],
      "size": "79%",
      "startAngle": -90,
      "endAngle": 60,
      "background": {
        "borderWidth": 1,
        "backgroundColor": "transparent",
        "innerRadius": "90%",
        "outerRadius": "100%",
        "shape": "arc"
      }
    },
    "yAxis": [{
      "lineWidth": 0,
      "min": 0,
      "max": 90,
      "minorTickLength": 0,
      "tickLength": 0,
      "tickWidth": 0,
      "labels": {
        "enabled": false
      },
      "title": {
        "text": "",
        "useHTML": false,
        "y": 80
      },
      "pane": 0
    }],
    "plotOptions": {
      "series": {
        "enableMouseTracking": false
      },
      "pie": {
        "dataLabels": {
          "enabled": true,
          "distance": 0,
          "style": {
            "fontWeight": "bold",
            "color": "white",
            "textShadow": "0px 1px 2px black"
          }
        },
        "startAngle": -90,
        "endAngle": 80,
        "center": ["50%", "50%"]
      },
      "gauge": {
        "dataLabels": {
          "enabled": false
        },
        "pivot": {
          "radius": 133,
          "borderWidth": 1,
          "borderColor": "transparent",
          "backgroundColor": "white"
       ...