Highcharts Demo

author(s): Torstein Hønsi

by Murali Kaliappan

HTML

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

<div id="container" style="width: 100%; height: 400px; margin: 0 auto"></div>

CSS

#container .highcharts-axis-labels text:first-child{
  text-anchor:start
}
#container .highcharts-axis-labels text:last-child{
  text-anchor:end;
}

#container {
    min-width: 900px;
}

TypeScript

var width = $("#container").width()/3;
var firstWidth = width /2 ;

var plotWidth  = 100/3;
var pwidth =plotWidth / 2;
Highcharts.chart('container', {

    chart: {
        type: 'gauge',
      	plotBorderWidth: 1,    
        plotBorderColor:'#f9f7f7	',
        plotBackgroundImage: null
        
    },
    
    exporting: {
    	sourceWidth: 900
    },
  
  
labels: { 
            items: [{
            		useHTML: true,		
                html: '<span style="text-align:center;">My custom label</span><br><span style="text-align:center;">My Label Data<br>Another Label Data<br>How to apply text align:center property those text</span>',
                style: {
                    left: firstWidth,//"225px",
                    top: "210px",
                    textAnchor:"middle"
                }

            },{
                   html: '<span style="text-align:center;">My custom label</span><br><span style="text-align:center;">My Label Data<br>Another Label Data<br>How to apply text align:center property those text</span>',
                style: {
                    left: firstWidth+ width,//"590px",
                    top: "210px"
                }

            },{
                   html: '<span style="text-align:center;">My custom label</span><br><span style="text-align:center;">My Label Data<br>Another Label Data<br>How to apply text align:center property those text</span>',
                style: {
                    left: firstWidth + width *2,//"945px",
                    top: "210px"
                }

            }]
        }, 
    title: {
        text:'Deviation From Target Values<br><spantyle="font-size:8px">24-Jan-2018 to 7-Feb-2017</span>'
    },

    pane: [{
        startAngle: -90,
        endAngle: 90,
        background: {
        	shape:'arc',
          outterRadius:'105%',
          backgroundColor:null
        },
        center: [pwidth+'%', '50%'],
        size: 250
    }, {
        startAngle: -90,
        endAngle: 90,
        ...