Coldfusion: CFChart format labels on horizontal bar graph

Question

I am having trouble aligning Horizontal Bar graph x-axis Labels, I have long names that I have wrapped using /n. The labels are no longer right aligned (see picture). Is there a way to left or right align (see image)? I am new creating charts in CF and am stumbling around, if anyone can point me to any documentation that will allow me to know what are valid attributes are for elemets (ie: xAxis...itemsOverlap), I stumbled on this from a post but don't know where to find this info, thanks. While I am here is there any way to change the color of the value displayed for each bar? (or have that number appear inside the bar?). again thank for your patients as I am new to this.

<CFSET xAxis_disp  = {"itemsOverlap":true, "max-items": SQL_Query.RecordCount}>
<CFSET aspect3d_small={"angle":0,"depth":7,"true3d":false}>`

<CFSET yAxisStep_25 = {"min-value":"0","step":"5"}>

<CFCHART
    style="default" 
    show3d="yes"
    chartHeight="#chartHeight_error#"
    chartwidth="500"
    type="horizontalbar"
    gridlines="20"
    yAxis = "#yAxisStep_25#"
    xAxis="#xAxis_disp#"
    aspect3d="#aspect3d_small#"
    font="times" > 
    
    <CFCHARTSERIES 
    colorlist="##234086,##284A99,##284A99,##325CC0,##3D68CD,##5077D2,##6486D7,##7795DC,##8BA4E1"
        query="SQL_Query"
        type="bar"  
        datalabelstyle="value"
        itemcolumn="CRFNAME"  
        valuecolumn="ErrCounter">
    </CFCHARTSERIES>
    </CFCHART>

Chart Labels, not aligned

xAxis item alignment is controlled with `"item": { "text-align":"right"}`. Add it to your `xAxis_disp` structure. For the other attributes, have a look at the [ZingChart docs](https://www.zingchart.com/docs/api/json-configuration/graphset/scale-x). — SOS, Oct 06 '21 at 03:13
You're welcome. CFChart is just a wrapper around ZingChart, so the ZingCharts docs will be more helpful for stuff like this. I usually end up googling "How to do X with ZingChart" and pore over the Zingchart's docs to find the syntax ... then figure out how it maps to the CF attributes with a little trial and error, lol. — SOS, Oct 06 '21 at 19:17
thank you so much, I appreciate your input because I had no idea where to start looking! now I finally have a clue how to format my charts and i got alignment working. thanks again! — mctobey, Oct 07 '21 at 12:31

score 0 · Answer 1 · answered Oct 08 '21 at 16:17

FWIW, CFChart is just a wrapper around ZingChart, so the ZingCharts docs will be more helpful for stuff like this. I usually end up googling "How to do [X] with ZingChart" and/or pore over the ZingChart docs to find the syntax ... then figure out how it maps to the CF attributes with a little trial and error :-).

Anyway, the xAxis item alignment is controlled with "item": { "text-align":"right"}. Add it to your xAxis_disp structure. For the other xAxis attributes (i.e. "Scale-X"), have a look at the ZingChart docs

<CFSET xAxis_disp  = {"items-overlap":true
 , "max-items": 6
 , "auto-fit": true
 , "item": { "text-align":"right"}
}>

Runnable TryCF.com Example

Coldfusion: CFChart format labels on horizontal bar graph

1 Answers1