Ask a Jedi: Modify cfchart to remove commas from y-axis

This question came to me from Haris:

I just wondering if you could help me with cfchart y-axis. ColdFusion for some reason auto format y-axis with number, for example the value of 2008 on y-axis is displayed as 2,008. Is it possible to disable auto formatting since I try to display year on y-axis so the value 2,008 look strange on the chart it should be just 2008.

To be fair, it isn't ColdFusion that is doing the formatting, but the embedded WebCharts engine. Luckily enough this is easy to tweak. I loaded up the chart editor and went to the YAxis setting. Under the Format tab you will see it defaults to Number:

At first I thought it was impossible to edit the format. As you can see in the screen shot, it is grayed out. However, if you switch to Pattern you can then tweak it. I did and set the value to just #. You can see in the preview that the commas are removed.

Ok, so before I tried to even use the style here, I created a quick demo to showcase the default behavior.

<cfchart chartheight="500" chartwidth="500" title="Test Chart" scalefrom="2000" scaleto="2020" > <cfchartseries type="bar" > <cfchartdata item="Apples" value="2008"> <cfchartdata item="Bananas" value="2009"> <cfchartdata item="Cherries" value="2008"> <cfchartdata item="Donuts" value="2005"> </cfchartseries> </cfchart>

This generates:

I took the style XML from the editor and removed a lot of the extra stuff. I then passed the XML to the cfchart tag:

<cfsavecontent variable="style"> <?xml version="1.0" encoding="UTF-8"?> <frameChart is3D="false"> <yAxis scaleMin="2000" scaleMax="2020"> <labelFormat style="Pattern" pattern="###"/> </yAxis> </frameChart> </cfsavecontent> <cfchart chartheight="500" chartwidth="500" title="Test Chart" style="#style#"> <cfchartseries type="bar" > <cfchartdata item="Apples" value="2008"> <cfchartdata item="Bananas" value="2009"> <cfchartdata item="Cherries" value="2008"> <cfchartdata item="Donuts" value="2005"> </cfchartseries> </cfchart>

And here is the result:

Notice too that I moved the scales into XML. This seemed to work better than scalefrom/to once I moved to a style based design.

Raymond Camden's Picture

About Raymond Camden

Raymond is a developer advocate. He focuses on JavaScript, serverless and enterprise cat demos. If you like this article, please consider visiting my Amazon Wishlist or donating via PayPal to show your support. You can even buy me a coffee!

Lafayette, LA https://www.raymondcamden.com

Comments