rotate variable to fit credit score gauge javascript

Question

I am new to javascript, so I am trying to rotate the variables of bad, poor, good and excellent to fit the border on the credit score gauge. I have searched the web, but I am stuck in how to angle/rotate these variables. Here is the link to the codepen.

var chartVars = "KoolOnLoadCallFunction=chartReadyHandler";

KoolChart.create("chart1", "chartHolder", chartVars, "100%", "100%");

function chartReadyHandler(id) {
document.getElementById(id).setLayout(layoutStr);
document.getElementById(id).setData(chartData);
}
var trackValues = [0,20,40,60,80,100];

var trackLabels = ["BAD", "POOR", "FAIR", "GOOD", "EXCELLENT"];

var layoutStr = 
'<KoolChart frameColor="#EEEEEE"  borderStyle="none">'
+'<Options>'
+'<Caption text="CREDIT SCORE" />'
+'</Options>'
+'<NumberFormatter id="numFmt" precision="0"/>'
+'<HalfCircularGauge frameType="flat" trackLabelStyleName="trackText" minimumAngle="180" 
maximumAngle="360" minimum="0" maximum="100" interval="20" minorInterval="20" 
formatter="{numFmt}" tickGap="0" padding="-120" showValueLabel="false" 
tickLabelStyleName="tickText" valueLabelStyleName="valueText" 
dataTipJsFunction="dataTipFunction" editMode="true" liveDragging="true" 
showDataTip="true" needleThickness="30" pointThickness="2" needleLengthRatio="0.65" 
needlePointStyle="steeple" needleBackLengthRatio="0" showTickLabels="false" 
tickLabelPosition="inside" showTrackColor="true" trackColors=" 
[#FF4500,#FF8000,#EEEE00,#00CD00,#008000]" trackAlphas="[1,1,1,1,1]" trackValues="[' + 
trackValues.toString() + ']" trackInnerRadius="0.35" trackOuterRadius="1" 
bounceAnimating="true" majorTickType="line" tickRadius="98" needleCoverRadius="15" 
trackLabels="[' + trackLabels.toString() + ']" trackLabelsXOffset=" 
[-1.3,-0.8,-0.2,0.5,0.8]" trackLabelsYOffset="[0.2,-0.8,-1.35,-0.8,0.2]" 
needleTrackColorEnable="true">'
+'<stroke>'
+'<Stroke color="#CCCCCC" weight="1" alpha="0.5"/>'
+'</stroke>'
+'<frameStroke>'
+'<Stroke color="#ffffff" weight="40" alpha="0"/>'
+'</frameStroke>'
+'<tickStroke>'
+'<Stroke color="#ffffff" weight="2"/>'
+'</tickStroke>'
+'<frameFill>'
+'<SolidColor color="#B3B3B3"/>'
+'</frameFill>'
+'<needleFill>'
+'<SolidColor color="#555555"/>'
+'</needleFill>'
+'<needleStroke>'
+'<SolidColor color="#555555"/>'
+'</needleStroke>'
+'<needleCoverStroke>'
+'<Stroke color="#555555" weight="12"/>'
+'</needleCoverStroke>'
+'</HalfCircularGauge>'
+'<Style>'
+'.tickText{fontSize:15;color:0xFF6600;}'
+'.trackText{fontSize:25;color:#171717;fontWeight:bold;}'
+'</Style>'
+'</KoolChart>';

var chartData = [70];

function dataTipFunction(str) {
return "<font color='#FF2200'>Value: " + Math.round(str) + "</font>";
}

https://codepen.io/anuygen/pen/zYppyWR