<cfchart>

Generates and displays a chart.

https://github.com/lucee/extension-chart

This tag may have a body.

This tag is also supported within <cfscript>

Attribute Description
fontitalic
boolean, optional

Yes: displays grid control text in italics
showmarkers
boolean, optional

Applies to chartseries type attribute values line, curve and scatter. yes: display markers at data points
xaxistitle
string, optional

text; X-axis title
gridlines
number, optional

Number of grid lines to display on value axis, including axis; positive integer.
yaxistype
string, optional

Currently has no effect, as Y axis is always used for data values. Valid values are category and scale
sortxaxis
boolean, optional

Display column labels in alphabetic order along X-axis. Ignored if the xAxisType attribute is scale.
foregroundcolor
string, optional

color for control. For a hex value, use the form: textColor = "##xxxxxx", where x = 0-9 or A-F; use two hash signs or none.
databackgroundcolor
string, optional

color for control. For a hex value, use the form: textColor = "##xxxxxx", where x = 0-9 or A-F; use two hash signs or none.
labelformat
string, optional

Format for Y-axis labels.
style
string, optional

XML file or string to use to specify the style of the chart.
show3d
boolean, optional

Display chart with three-dimensional appearance.
url
string, optional

URL to open if the user clicks item in a data series; the onClick destination page.
fontbold
boolean, optional

Yes: displays grid control text in bold
showxlabel
boolean, optional

yes: shows the x-axis labels
name
string, optional

Page variable name. String. Generates the the graph as binary data and assigns it to the specified variable. Suppresses chart display. You can use the name value in the cffile tag to write the chart to a file.
categorylabelpositions
string, optional

Label postion relative to axis: standard, up_45, up_90, down_45, down_90 or horizontal (standard) and vertical (down_90). Default is horizontal.
scalefrom
number, optional

Y-axis minimum value; integer
backgroundcolor
string, optional

Color of the area between the data background and the chart border, around labels and around the legend. Hexadecimal value or supported named color. For a hex value, use the form: textColor = "##xxxxxx", where x = 0-9 or A-F; use two hash signs or none.
chartheight
number, optional

Chart height; integer number of pixels
yaxistitle
string, optional

text; X-axis title
xoffset
number, optional

Applies if show3D="yes". Number of units by which to display the chart as angled, horizontally
tipstyle
string, optional

Determines the action that opens a popup window to display information about the current chart element. - mouseDown: display if the user positions the cursor at the element and clicks the mouse. Applies only to Flash format graph files (Flash not supported). - mouseOver: displays if the user positions the cursor at the element - none: suppresses display
scaleto
number, optional

Y-axis max value; integer
format
string, optional

File format in which to save graph.
font
string, optional

Font of data in column.
xaxistype
string, optional
  • category The axis indicates the data category. Data is sorted according to the sortXAxis attribute. - scale The axis is numeric. All cfchartdata item attribute values must numeric. The X axis is automatically sorted numerically.
tipbgcolor
string, optional

color for control. For a hex value, use the form: textColor = "##xxxxxx", where x = 0-9 or A-F; use two hash signs or none.
source
string, optional

variable name of the source path, if set the path to the source file is returned and no image tag is written to response strea.
showlegend
boolean, optional

yes: if chart contains more than one data series, display legend
chartwidth
number, optional

Chart width; integer number of pixels
markersize
number, optional

Size of data point marker. in pixels. Integer.
showygridlines
boolean, optional

yes: display Y-axis gridlines
showborder
any, optional

Whether to display a border around the chart or not (boolean), you can also define a color (string) instead.
showtooltip
boolean, optional

show the tooltip or not
showxgridlines
boolean, optional

yes: display X-axis gridlines
title
string, optional

Title of the chart.
pieslicestyle
string, optional

Applies to chartseries type attribute value pie.
yoffset
number, optional

Applies if show3D="yes". Number of units by which to display the chart as angled, horizontally.
fontsize
number, optional

Size of text in column.
seriesplacement
string, optional

Applies to charts that have more than one data series. Relative positions of series.

 
<cfchart
    [fontitalic=boolean]
    [showmarkers=boolean]
    [xaxistitle=string]
    [gridlines=number]
    [yaxistype=string]
    [sortxaxis=boolean]
    [foregroundcolor=string]
    [databackgroundcolor=string]
    [labelformat=string]
    [style=string]
    [show3d=boolean]
    [url=string]
    [fontbold=boolean]
    [showxlabel=boolean]
    [name=string]
    [categorylabelpositions=string]
    [scalefrom=number]
    [backgroundcolor=string]
    [chartheight=number]
    [yaxistitle=string]
    [xoffset=number]
    [tipstyle=string]
    [scaleto=number]
    [format=string]
    [font=string]
    [xaxistype=string]
    [tipbgcolor=string]
    [source=string]
    [showlegend=boolean]
    [chartwidth=number]
    [markersize=number]
    [showygridlines=boolean]
    [showborder=any]
    [showtooltip=boolean]
    [showxgridlines=boolean]
    [title=string]
    [pieslicestyle=string]
    [yoffset=number]
    [fontsize=number]
    [seriesplacement=string]
><!--- body --->[</cfchart>]

Examples

Exmaple for cfchart

<cfchart format="jpg" title="Sales Report" backgroundcolor="cyan" showborder="true">
  <cfchartseries type="pie" >
    <cfchartdata item="2012" value="2000">
    <cfchartdata item="2013" value="4000">
    <cfchartdata item="2014" value="5000">
    <cfchartdata item="2015" value="7000">
  </cfchartseries>
</cfchart>

See also