Hi Everyone,
I have a circular gauge chart shown below and I'm trying to format the values on the label "Adjusted Sales" under the needle to result as currency (e.g. $5,000) adding both the dollar sign and the comma. I was able to format the axis values correctly and change the label background.
Here is my code that displays the chart without the formatting:
chart.padding("10%");
chart.startAngle(0);
chart.sweepAngle(360);
chart.fill(["#299ec7", "black"], .5, .5, null, 1, 0.5, 0.9);
// axis settings
var axis = chart.axis()
.radius(95)
.width(0);
// scale settings
axis.scale()
.minimum(0)
.maximum(150000)
.ticks({interval: 25000})
.minorTicks({interval: 1});
//labels
var labels = chart.label();
labels.offsetX("0%");
labels.offsetY("-45%");
labels.fontColor("White");
labels.hAlign("center");
labels.background().fill("black 0.2");
//axis labels
axis.labels().format (function(){
var num = Number( this.value );
return("$"+ num.toFixed(2).replace(/(\d)(?=(\d{3})+(?!\d))/g, '$1,'))})
.fontSize("12px")
.fontColor("white");
//axis ticks
axis.ticks()
.type("trapezium")
.fill("white")
.length(9);
//axis minor ticks
axis.minorTicks()
.enabled(true)
.fill("white")
.length(1.5);
// needle
chart.needle(0)
.enabled(true)
.startRadius("0%")
.endRadius("80%")
.middleRadius(0)
.startWidth("1%")
.endWidth("1%")
.fill("white")
.stroke("none")
.middleWidth("1%");
// marker
chart.marker(0)
.axisIndex(1)
.dataIndex(1)
.size(7)
.type("triangle-down")
.position("outside")
.radius(55);
// bar
chart.bar(0)
.axisIndex(1)
.position("inside")
.dataIndex(1)
.width(3)
.radius(60)
.zIndex(10);
// gap
chart.cap()
.radius("%");
// range
chart.range({
from: 0,
to: 150000,
fill: {keys: ["red", "orange", "yellow" , "green"]},
position: "inside",
radius: 100,
endSize: "3%",
startSize:"3%",
zIndex: 10
});