Quantcast
Channel: ASPRunner forums
Viewing all articles
Browse latest Browse all 2586

Chart Label Error

$
0
0
Hi Everyone,

I have a circular gauge chart shown below and I'm trying to format the values on the label under the needle to result as currency (e.g. $5,000) adding both the dollar sign and the comma as well as remove/change the white background and title.

Posted Image



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});


//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);


//label
chart.label()
.offsetY("-45%")
.offsetX("0%")
.fontColor("Black")
.hAlign("center");

// 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
});

		

Viewing all articles
Browse latest Browse all 2586

Trending Articles