Get started with cfchart

Last update:

May 18, 2026

Warning:

FORMAT="flash" has been removed in Adobe ColdFusion (2025 release).

For a full list of deprecated features, Deprecated features .

The cfchart tag in ColdFusion is used to generate and display charts. It can be used to create various types of charts, such as bar, line, pie, area, horizontal bar, cone, curve, cylinder, step, scatter, and other charts.

Syntax

<!--- This syntax uses a JSON file to specify the chart style. --->

<cfchart 

    format="html" 

    style = "JSON filename"> 

</cfchart>

<!--- This syntax uses the attributes of the cfchart tag to specify the chart style. --->  

<cfchart  

alpha = "value between 0 and 1"  

arrows = "JSON string representation"  

aspect3D = "JSON string representation"  

background = "JSON string representation"  

base64="true | false" 

bevel = "JSON string representation"  

border = "JSON string representation"  

backgroundColor = "hexadecimal value|web color"  

chartHeight = "integer number of pixels"  

chartWidth = "integer number of pixels"  

crosshair = "JSON string representation"  

dataBackgroundColor = "hexadecimal value|web color" 

fill = "JSON string representation"  

font = "font name"  

fontBold = "yes|no"  

fontItalic = "yes|no"  

fontSize = "font size"  

foregroundColor = "hexadecimal value|web color"  

format = "jpg|png|html|svg"  

gridlines = "integer number of lines"  

height = "height in pixels" 

width = "width in pixels" 

ID = "chart identifier"  

labels = "JSON string representation"  

legend = "JSON string representation"  

labelFormat = "number|currency|percent|date"  

markers = "JSON string representation"  

markerSize = "integer number of pixels"  

name = "string"  

options="struct"

pieSliceStyle = "solid|sliced"  

plot = "JSON string representation"  

plotarea = "JSON string representation"  

preview = "JSON string representation"  

refresh = "canvas|flash|svg|vml"  

renderer = "canvas|flash|svg|vml"  

scales = "comma-seperated list of axes"  

scaleR="scales for pie and gauge charts"

scaleFrom = "integer minimum value"  

scaleTo = "integer maximum value"  

seriesPlacement = "default|cluster| stacked|percent"  

show3D = "yes|no"  

showBorder = "yes|no"  

showLegend = "yes|no"  

showMarkers = "yes|no" 

showScaleMarkers="yes|no"

showXGridlines = "yes|no"  

showYGridlines = "yes|no"  

sortXAxis = "yes|no"  

tipBGColor = "hexadecimal value|web color"  

title = "title of chart"  

tooltip = "JSON string representation"  

theme="default or custom theme"

url = "onClick destination page"  

x="x coordinate"

xAxis = "JSON string representation"  

xAxis2 = "JSON string representation"  

xAxisTitle = "title text"  

xAxisType = "scale|category"  

xAxisValues = "Array of values"  

xOffset = "number between -1 and 1"  

y="y coordinate"

yAxis = "JSON string representation"  

yAxis2 = "JSON string representation"  

yAxisTitle = "title text"  

yAxisType = "scale|category"  

yAxisValues = "Array of values"  

yOffset = "number between -1 and 1" 

zoom = "JSON string representation"  

</cfchart>

Note: You can specify this tag's attributes in an attributeCollection attribute whose value is a structure. Specify the structure name in the attributeCollection attribute and use the tag's attribute names as structure keys.

History

Version	Changes
ColdFusion (2025 release)	Removed flash format. Added svg as format. Added the following attributes: x y markers scaleR showScaleMarkers options theme
ColdFusion (2018 release) Update 5	Added attribute base64.
ColdFusion (2018 release)	Added support for responsive client-side charts. You can specify the height and width in percentages.
ColdFusion 11	The server-side charting introduced in ColdFusion 10 that allowed you to create highly interactive charts has been further enhanced to produce visually more appealing charts. Note that the new look and feel will not be available for the following tag attributes: cfchart labelFormat seriesPlacement with percent as the value sortXAxis xAxisType yAxisType xOffset yOffset cfchartseries markerStyle: letterx, mcross, snow, and rcrosspaintStyle
	The XML format style has been removed. ColdFusion provides a utility to convert XML styles (used by the old charting system) to JSON styles (used by the new charting system). To perform this conversion, you need to use cfchart_xmltojson.bat (or cfchart_xmltojson.sh) available in <cfusion_home>/bin folder: cfchart_xmltojson.bat <xml_file_path> The converted JSON style will be created in the same location as the XML file.
ColdFusion 10	Added the following new attributes: alpha arrows aspect3D background bevel border crosshair fill format height id labels legend plot plotarea preview refresh renderer scales type tooltip width xaxis axis2 xaxisvalues yaxis yaxis2 yaxisvalues zoom
ColdFusion 8	Added the new attribute showLegend to the chart style files, which are the JSON files located in the charting\styles directory- This attribute displays an entry for each point and is applicable only to charts that contain a single series. By default, the value of showLegend is set to true. To turn off this feature, you can either modify the setting in all the chart style files, or use a custom style file.
ColdFusion MX 7.01	Changed documentation to state that the fontSize attribute can accept a number that is not an integer.
ColdFusion MX 7	Added styleand titleattributes. Added support for eight-digit hexadecimal values to specify RGB color and transparency. Removed the rotatedattribute.
ColdFusion MX 6.1	Added the xAxisTypeand yAxisTypeattributes. Changed interpolation behavior: the tag now interpolates data points on line charts with multiple series.
ColdFusion MX	Added this tag.

Attributes

Attribute	Req/Opt	Default	Description
alpha	Optional	1	Alpha (transparency) level of the background. Valid values range from 0 (transparent) to 1 (opaque).
arrows	Opt		Creates an arrow for pointing out data or other chart items. JSON string representation of an array of structs that contain values such as to, from, size, and label. See example below .
aspect3D	Opt		JSON string representation of struct that defines the angle of 3D aspect.The valid struct keys are angle, depth, and true3d. The true3d key determines whether the chart uses a true 3D engine or an isometric view. Disabling true3d forces an isometric view. See examples below .
background	Opt		A struct of keys related to background such as color: Sets the background color(s) color-1: Sets the first background color for the arrow color-2: Sets the second background color for the arrow (used with gradients) transparent: Set the transparency of a background image so that underlying colors or chart can show. fit: Defines the width/height to fit area of background. repeat: Defines type of image repeat. image: Defines the path to the background image. For all chart formats, a URL is supported. For format="jpg" and format="png", an absolute path is also supported. For format="html" and format="flash", a relative path is also supported. position: Defines the position of the background image. See example below .
backgroundColor	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; see the name list in Usage. For a hexadecimal value, use the form "##xxxxxx" or "##xxxxxxxx", where x = 0-9 or A-F; use two number signs or none.
base64	Opt	False	This attribute is used for server-side charting.
bevel	Opt		A struct of keys related to bevel such as. color: Defines the color of the bevel. blur-x: Defines the sharpness/smoothness of the bevel edges in the x-direction. blur-y: Defines the sharpness/smoothness of the bevel edges in the y-direction. angle: Defines the angle of the bevel. distance: Distance in # \| #px indicating the distance from the object the bevel should be displayed.
border	Opt		A struct of keys related to border such as: color: Sets the color of the border. radius: Defines the radius of rounded corners. width: Defines the width of the border.
chartHeight	Optional	240	Chart height; integer number of pixels.
chartWidth	Optional	320	Chart width; integer number of pixels.
crosshair	Opt		A struct of keys related to crosshair such as: line-color: Sets the color of the crosshair lines. alpha: Defines the alpha transparency level of the line. line-style: Defines the line style. See example below .
dataBackgroundColor	Optional	white	Color of area around chart data.Hexadecimal value or supported named color; see the name list in the Usage section. For a hexadecimal value, use the form "##xxxxxx" or "##xxxxxxxx", where x = 0-9 or A-F; use two number signs or none.
fill	Opt		A struct of keys related to fill such as: angle: Sets the angle at which a linear fill is displayed. A fill angle of zero displays a vertical gradient from top (background-color-1) to bottom (background-color-2). offset-x: Set x-axis offset for background gradient. offset-y: Set y-axis offset for background gradient. See example below .
font	Optional	arial	Name of text font: arial times courier arialunicodeMS. This option is required, if you are using a double-byte character set on UNIX, or using a double-byte character set in Windows with a file type of Flash.
fontBold	Optional	no	Whether to make the text bold: yes no
fontItalic	Optional	no	Whether to make the text italicized: yes no
fontSize	Optional	11	Font size. If the number is not an integer, ColdFusion rounds the number up to the next integer.
foregroundColor	Optional	black	Color of text, grid lines, and labels.Hexadecimal value or supported named color; see name list in the Usage section. For a hexadecimal value, use the form "##xxxxxx" or "##xxxxxxxx", where x = 0-9 or A-F; use two number signs or none.
format	Required		File format in which to save the graph: html jpg png svg
gridlines	Optional	10, including top and bottom	Number of grid lines to display on the value axis, including axis; positive integer.
height	Opt		Chart height; integer; number of pixels. cfchart calculates the height as a percentage of the available height of the chart.
ID	Opt		ID of the chart. Used to get the underlying chartobject.
labels	Opt		An array of structs used to display custom text or images on the chart, for example, author or chart information. See example below .
labelFormat	Optional	number	Format for y-axis labels: number currency percent date
legend	Opt		A struct used to define the legend attributes, for example, background- color or margin-top. See example below .
markers	Opt		Add markers to the chart.
markerSize	Optional	(Automatic)	Size of data point marker in pixels; integer.
name	Optional		Page variable name; string. Generates 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.
options	Optional		Struct to specify stying of boxplot chart elements.
pieSliceStyle	Optional	sliced	Applies to the cfchartseries type attribute value pie. solid: displays pie as if unsliced. sliced: displays pie as if sliced.
plot	Opt		A struct of keys such as animation, aspect, margin, dynamic, fixedValue, and marker used to style the plotting. See example below .
plotarea	Opt		A struct of keys such as position and margin used to style the plot area.
preview	Opt		A struct of keys such as visible and margin to control chart preview. Additional keys are as follows: live: Sets whether the chart is updated when the preview active area is being moved. Default is false for classic theme and true for light/dark themes. The graph will update only when the mouse is released. preserve-zoom: Sets whether the zoom level is preserved when a chart is altered or reloaded.
refresh	Opt		A struct of keys such as type, url, and interval to create dynamic charts.
renderer	Opt		Specify the rendering method. You must remove the format=”html” setting and then set the renderer to “flash”. The supported values are flash, svg, and vml.
scaleFrom	Optional	Determinedby data	Y-axis minimum value; integer.
scales	Opt		Comma-separated list of axis against which to plot the chart, for example, x,y2.
scaleR	Opt		Configure scales for pie and gauge charts.
showScaleMarkers	Opt		Specify whether to show markers along the axes.
scaleTo	Optional	Determinedby data	Y-axis maximum value; integer.
seriesPlacement	Optional	default	Relative positions of series in charts that have more than one data series. default: ColdFusion determines relative positions, based on graph types cluster stacked percent
show3D	Optional	no	Whether to display the chart with three-dimensional appearance: yes no
showBorder	Optional	no	Whether to display a border around the chart: yes no
showLegend	Optional	yes	Whether to display the legend if the chart contains more than one data series: yes no
showMarkers	Optional	yes	Whether to display markers at data points in line, curve, and scatter graphs: yes no
showXGridlines	Optional	no	Whether to display x-axis gridlines: yes no
showYGridlines	Optional	yes	Whether to display y-axis gridlines: yes no
sortXAxis	Optional	no	Whether to display column labels in alphabetic order along the x axis: yes no Ignored if the xAxisType attribute is scale.
style	Optional		JSON file or string to use to specify the style of the chart. In ColdFusion 11, the XML format style has been removed.
theme	Optional		Add default or custom themes to your chart.
title	Optional		Title of the chart.
tipbgcolor	Optional	white	Background color of tips. Applies only to Flash format graph files. Hexadecimal value or supported named color; see the name list in the Usage section. For a hexadecimal value, use the form "##xxxxxx", where x = 0-9 or A-F; use two number signs or none.
tooltip	Optional		A struct of keys used to style the tool tip such as background, font,or border.
type	Optional		Type of chart.
url	Optional		URL to open if the user clicks item in a data series; the onClick destination page. You can specify variables within the URL string; ColdFusion passes current values of the variables. $VALUE$: the value of the selected row. If none, the value is an empty string. $ITEMLABEL$: the label of the selected item. If none, the value is an empty string. $SERIESLABEL$: the label of the selected series. If none, the value is an empty string, for example: "somepage.cfm?item=$ITEMLABEL$&series=$SERIESLABEL$&value=$VALUE$ "javascript:...": executes a client-side script.
x	Optional		Integer/Percentage. X coordinate of the upper-left corner. x=0, y=0 defines the upper-left coordinate (0,0) from where a cfchart output renders.
width	Optional	320	Width of the Chart in pixels.
xAxis	Optional		A struct of keys used to style x axis such as format, guide, item, zooming, and label. See example below .
xAxis2	Optional		A struct of keys used to style second x axis such as format, guide, item, and label, which is on the top of the chart.
xAxisTitle	Optional		Title that appears on the x axis; text.
xAxisType	Optional	category	Whether the x axis indicates data or is numeric: 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 be numeric. The x axis is automatically sorted numerically.
xAxisvalues	Opt		An array of values to be displayed on x axis.
xOffset	Optional	0.1	Number of units by which to display the chart as angled, horizontally.Applies if show3D="yes". The number can be between 1 and 1,where "-1" specifies 90 degrees left and "1" specifies 90 degrees right.
y	Optional		Integer/Percentage. Y coordinate of the upper-left corner. x=0, y=0 defines the upper-left coordinate (0,0) from where a cfchart output renders.
yaxis	Opt		A struct of keys used to style y axis such as format, guide, item, and label.
yaxis2	Opt		A struct of keys used to style second y axis such as format, guide,item, and label, which is on the top of the chart.
yAxisTitle	Optional		Title of the y axis; text.
yAxisType	Optional	category	Currently has no effect, as the y axis is always used for data values.
yaxisvalues	Opt		An array of values to be displayed on y axis.
yOffset	Optional	0.1	Number of units by which to display the chart as angled, vertically.Applies if show3D="yes". The number can be between 1 and 1, where "-1" specifies 90 degrees left and "1" specifies 90 degrees right.
width	Optional		Integer/Percentage. cfchart calculates the width as a percentage of the available width of the chart.
zoom	Opt		A struct of keys to be applied when you zoom the chart such as alpha, background, or bevel. See example below .

Usage

The cfchart tag defines a container in which a graph displays: its height, width, background color, labels, and so on. The cfchartseries tag defines the chart style in which data displays: bar, line, pie, and so on. The cfchartdata tag defines a data point.Data is passed to the cfchartseries tag in the following ways:

As a query
As data points, using the cfchartdata tag For the font attribute value ArialUnicodeMS, the following rules apply:
In UNIX, for all type values, to render a double-byte character set, select this value.
If this value is selected, the fontBold and fontItalic attributes have no effect. The following table lists W3C HTML 4 named color value or hexadecimal values that the color attribute accepts:

Color name	RGB value
Aqua	##00FFFF
Black	#000000
Blue	##0000FF
Fuchsia	##FF00FF
Gray	##808080
Green	##008000
Lime	##00FF00
Maroon	##800000
Navy	##000080
Olive	##808000
Purple	##800080
Red	##FF0000
Silver	##C0C0C0
Teal	##008080
White	##FFFFFF
Yellow	##FFFF00

For all other color values, enter the hexadecimal value. You can enter a six-digit value, which specifies the RGB value, or an eight-digit value, which specifies the RGB value and the transparency. The first two digits of an eight-digit hexadecimal value specify the degree of transparency, with FF indicating opaque and 00 indicating transparent. Values between 00 and FF are allowed. For more color names that are supported by popular browsers, go to www.w3.org/TR/css3-color . You can specify whether charts are cached in memory, the number of charts to cache, and the number of chart requests that ColdFusion can process concurrently. To set these options in the ColdFusion Administrator, select Server Settings>Charting. The following attributes are not supported: format, labelformat , seriesplacement with percent as the value, sort, xAxis, url , xAxisType, xOffset, yAxisType, and yOffset.

Note:

If you are using <!DOCTYPE html>, and not DOCTYPE, cfchart uses quarks mode that is supported by browsers. For standard HTML output, the width and height must have html standard units i.e. px, % etc. In quarks mode, the width and height with units falls back to pixel.

Note:

Format="html" does not work when using <!DOCTYPE html> in a cfchart code.

Quickly create a chart

This section runs through creating a basic bar and pie chart. It’s meant to paint the big picture and suggest a workflow, before we descend into the detailed treatment of the key components of creating a chart using the cfchart tag.

Let’s get started with creating a bar chart.

For a simple bar chart, you'll need some data to represent. You can use hard-coded values or retrieve data from a database using <cfquery>.

<cfset chartData = [10, 20, 30, 40, 50]> <!--- example data--->  

<cfchart format="html" xaxistitle="Categories" yaxistitle="Values" title="Bar Chart Example" type="bar" showlegend="false"> 

    <cfchartseries type="bar"> 

        <cfchartdata item="Category 1" value="#chartData[1]#"> 

        <cfchartdata item="Category 2" value="#chartData[2]#"> 

        <cfchartdata item="Category 3" value="#chartData[3]#"> 

        <cfchartdata item="Category 4" value="#chartData[4]#"> 

        <cfchartdata item="Category 5" value="#chartData[5]#"> 

    </cfchartseries> 

</cfchart>

On similar lines, create a pie chart.

As you’d defined the data for the bar chart, do the same here:

<cfchart format="png" chartWidth="600" chartHeight="400" pieSliceStyle="sliced"> 

    <cfchartseries type="pie" serieslabel="Website Traffic 2024"> 

        <cfchartdata item="January" value="#randRange(500000,1000000)#"> 

        <cfchartdata item="February" value="#randRange(500000,1000000)#"> 

        <cfchartdata item="March" value="#randRange(500000,1000000)#"> 

        <cfchartdata item="April" value="#randRange(500000,1000000)#"> 

        <cfchartdata item="May" value="#randRange(500000,1000000)#"> 

        <cfchartdata item="June" value="#randRange(500000,1000000)#"> 

    </cfchartseries>

</cfchart>

Basics of cfchart

Basic syntax and structure

In ColdFusion, the cfchart tag is used to create charts and graphs within your applications. The basic syntax of the cfchart tag involves specifying the chart type, chart data, and various other attributes to customize the appearance and functionality of the chart. Here's an overview of the basic syntax of cfchart in ColdFusion:

<cfchart  

    format="png|jpg|html|svg" 

    chartWidth="width" 

    chartHeight="height" 

    title="Chart Title" 

    type="chart_type"> 

    <!-- Define series data --> 

    <cfchartseries  

        type="series_type" 

        query="query_name" 

        itemcolumn="column_name" 

        valuecolumn="column_name"> 

    </cfchartseries> 

<!-- Define other series or additional chart customization here --> 

 </cfchart>

Different types of charts in ColdFusion

Pie Chart: Displays data in a circular graph, illustrating the proportions of a whole.
Bar Chart: Uses rectangular bars to compare values across categories or display data trends over time.
Line Chart: Shows data trends or changes over a continuous interval using lines connecting data points.
Scatter Chart: Represents data points on a two-dimensional plane to demonstrate correlations or distributions.
Area Chart: Like a line chart, the area below the line is filled, emphasizing the cumulative effect of changing values.
Bubble Chart: Displays data in bubbles (or spheres) with different sizes to represent multiple data dimensions.
Gauge Chart: Illustrates data within a gauge-like format, often used to display progress or performance metrics.
Column Chart: Like a bar chart, the bars are vertically oriented.
Stacked Chart: Shows multiple data series stacked on top of one another to compare total values and their constituents.
Bullet chart: A bullet chart is a bar chart designed to display performance data efficiently. It encodes multiple data elements, including an observed value, a target value, and a range of values for grading. This chart type is ideal for making comparisons, such as measuring progress against a target or series of thresholds.
Cone chart: A cone chart is a data visualization tool used to represent portions or percentages of a whole, similar to pie charts. However, cone charts also display hierarchy, with the highest value at the top of the cone, which has the most expansive area.
Pyramid Chart: A pyramid chart is a visual representation showing a series of steps or categories in a hierarchical order, arranged in a triangle shape. It's often used to illustrate processes, systems, or population distribution.
Box Plot: A box plot displays information such as the median, quartiles, and potential outliers. It helps compare the distribution of data across different categories or groups.
Donut: A donut chart is a circular chart like a pie chart but with a hole in the center. This hole creates a ring-like appearance, from where the name "donut" comes. Donut charts represent proportions or percentages of a whole within a data set, like pie charts.
Histogram: A histogram represents numerical data that shows the frequency distribution of data points across a continuous range of numerical values.
Floating Bar: A floating bar chart visually represents numerical data where the bars don't start at zero on the Y-axis. Instead, the bars are positioned at a specific value on the Y-axis, which can be different for each bar. This type of chart is proper when comparing values that are not zero-based, such as changes in a value over time or comparing two different sets of data with different starting points.
Vertical Area chart: A vertical area chart is a type of chart that displays quantitative data by using continuous lines, like a line chart. However, the area beneath the lines is filled with a particular color for each series, making it easier to emphasize changes in values from several sets of similar data.
Stepped area: A Stepped Area is a type of chart that displays data points connected by horizontal and vertical line segments, resembling the steps of a staircase.
Curved area: A curved area chart displays data points connected by curved lines rather than straight lines. This chart type helps smooth out the data and make it easier to visualize trends.

Provide data to the cfchart tag

Use static data

You can use static data to generate a chart using the cfchart tag in ColdFusion by providing the data directly within the chart and series tags. This way, you can create a chart without linking it to a data source such as a query.

Follow the steps below to use static data for charts:

Define the data you want to display in the chart. This can be done by creating an array or a structure containing the data points you wish to visualize.
Use the cfchart tag in your ColdFusion code to create the chart. Specify the type of chart you want to generate (e.g., pie, bar, line) and provide the data you defined in step 1 as the source for the chart.
You can customize the chart's appearance by setting attributes such as colors, labels, titles, and legends within the cfchart tag.
Render the chart in your ColdFusion application by including the cfchart tag within your ColdFusion page or template.

Example

<cfchart format="html" chartheight="300" chartwidth="400" title="Monthly Sales" type="area"> 

    <cfchartseries type="area"> 

        <cfchartdata item="Jan" value="150" /> 

        <cfchartdata item="Feb" value="200" /> 

        <cfchartdata item="Mar" value="180" /> 

        <cfchartdata item="Apr" value="250" /> 

        <cfchartdata item="May" value="300" /> 

    </cfchartseries>

</cfchart>

In this example:

The cfchart tag creates an area chart with specified dimensions (chartheight and chartwidth) and a title (title).
The type attribute of the cfchart tag is set to "area", indicating that the chart should be an area chart.
The cfchartseries tag defines the type of the series as "area".
Inside the cfchartseries tag, the cfchartdata tags specify the data points to be plotted. Each cfchartdata tag specifies an item (x-axis value) and a value (y-axis value) for each data point.

Use data from a database

To create a chart using the cfchart tag in ColdFusion with data from a database, you first need to fetch the data from the database using a cfquery tag. Once you have the data in a query object, you can use it in the cfchart and cfchartseries tags to generate the chart.

Here's an example of how you might create an area chart using data from a database:

<cfquery name="getSalesData" datasource="art"> 

    select * from orders 

    order by orderdate 

</cfquery> 

<cfchart format="html" chartheight="400" chartwidth="600" title="Sales Over Time"> 

    <cfchartseries type="curve" query="getSalesData" itemColumn="orderdate" valueColumn="tax"/> 

</cfchart>

Customize charts

Using the cfchart tag, you can customize your charts for the following purposes:

Charts help represent data visually, making it easier to interpret trends, patterns, and comparisons. This is especially useful for complex datasets.
Customized charts provide a more engaging and interactive user experience.
Customization options allow you to emphasize specific aspects of the data, such as highlighting particular series, categories, or points of interest.
By customizing charts, you can make them more accessible for users with different needs, such as adjusting color schemes for color blindness.
Customizing charts allows you to align them with your brand's colors, fonts, and style, providing a consistent visual identity across your application.
Customized charts can present data in a specific context, such as reports, dashboards, or data-driven applications.
ColdFusion's charting capabilities offer customization options such as tooltips, legends, and labels, which provide more information and interactivity to the end user.
Customization allows you to combine different chart types (e.g., bar, line, pie) and series in a single chart, allowing for more nuanced data presentations.

Custom JSON styles in charts

The cfchart tag uses JSON-based styles, which are easily customizable. ColdFusion provides default styles for each type of chart, but you can override the style using your own style file. The following example uses a custom style file to customize the title's font and background.

You can define the customization of a chart in ColdFusion using the cfchart tag and a JSON object for styling options. ColdFusion's cfchart tag supports a graphset attribute, which can take a JSON string as its value. This allows you to specify various customization options for the chart, including chart type, dimensions, colors, titles, labels, and other visual settings.

Here’s an example demonstrating how to create a line chart using the cfchart tag with data from a JSON string and customization defined in a JSON object using the graphset attribute:

my_custom_style.json

{

 "graphset" : [

  {

   "type" : "bar",

   "title" : {

    "font-size" : 18,

    "color" : "#FF0000",

    "bold" : true,

    "font-family" : "Verdana",

    "background-color" : "#cccccc",

    "border-color" : "#cccccc",

    "border-width" : 1

   }

  }

 ]

}

Use the JSON in the cfm file, as shown below:

<cfchart format="html" type="bar" showlegend="false" chartHeight="400" chartWidth="600"

style="my_custom_style.json" title="Sales report">

    <cfchartseries>

        <cfchartdata item="2012" value=#randrange(10,100)#>

        <cfchartdata item="2013" value=#randrange(10,100)#>

        <cfchartdata item="2014" value=#randrange(10,100)#>

        <cfchartdata item="2015" value=#randrange(10,100)#>

        <cfchartdata item="2016" value=#randrange(10,100)#>

        <cfchartdata item="2017" value=#randrange(10,100)#>

    </cfchartseries>

</cfchart>

Output

Was this page helpful?

We're glad. Tell us how this page helped.

Found the answer to my problem Understood the instructions Liked the feature

Other suggestions

We're sorry. Can you tell us what didn't work for you?

Didn't find the answer to my problem Couldn't understand the instructions Didn't like the feature

Other suggestions

Thank you for your feedback. Your response will help improve this page.

Was this helpful?

We are sorry the content didn't meet your needs.

Share additional feedback to help us improve.

0/255 | Character limit exceeded.

Thank you so much for sharing your feedback!