Skip to main content
Participant
June 21, 2007
Question

vertical text in CFChart for x-axis item

  • June 21, 2007
  • 1 reply
  • 2855 views
I had a problem when I view a graph, for example <cfchartdata item="#Depart_Name#" value="#Salary#">. if depart_name to long the name did not be display. how can i DISPLAY Depart_Name in vertical?anyone?
This topic has been closed for replies.

1 reply

Inspiring
June 21, 2007
you can't really, with using just <cfchart>/<cfchartseries> tags...

you could, of course, set the type="horizontalbar" (if your chart is of
type bar) and/or use rotated="yes" to switch x and y axis positions, so
your category items are on the right instead of on the bottom...

to further customise the appearance of (some) elements of your charts,
you could copy the default.xml file located in [cf install
directory]\charting\styles folder into the folder where your
chart-generating page is located and edit it. you will then use
style="thenameofyourediteddefaultxmlfile.xml" in the <cfchart> tag to
apply these edited styles to your chart.

in that .xml file you can set some defaults for your charts appearance,
including the
<xAxis>
<labelStyle isHideOverlapped="true" orientation="Horizontal"/>

change "Horizontal" to "Vertical" to have your leabels display vertically...
--

Azadi Saryev
Sabai-dee.com
http://www.sabai-dee.com
Participating Frequently
June 27, 2016

Thanks. Clarification - if your xml file is thenameofyourediteddefaultxmlfile.xml then for CF10 and earlier style="thenameofyourediteddefaultxmlfile". Starting with CF11 add the file extension: style="thenameofyourediteddefaultxmlfile.xml". Took me a couple of minutes to figure this out. hope it saves others' time

So "Horizontal" and "Vertical" work. I'm looking for a way to rotate partially, say 45 degrees. Any ideas?

Participant
April 1, 2020

i found this: https://stackoverflow.com/questions/34137728/coldfusion-11-cfchart-xaxis-format

i create this variable: <cfset myStruct = {"item"={"font-angle"=-45}}/>

then in your cfchart tag set attribute xAxis="#myStruct#"