CODEWITHSUNDEEP
graphcoldfusioncfchart
mctobey
mctobey

Reputation: 31

Coldfusion: CFChart format labels on horizontal bar graph

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

Upvotes: 2

Views: 359

Answers (1)

SOS
SOS

Reputation: 6550

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

Upvotes: 1

Related Questions