Visualization API

API's to create Charts

Column

The syntax to create a column chart is given below:

Charts.ColumnChart column= new Charts.ColumnChart("Chart_Id");

Column 3D

column.ThreeD = true;

Overlapped

column.Overlapped = true;

Scroll

column.Scrollable = true;

Bar

The syntax to create a bar chart is given below:

Charts.BarChart bar= new Charts.BarChart("Chart_Id");

Bar 3D

bar.ThreeD = true;

Overlapped

bar.Overlapped = true;

Line

The syntax to create a line chart is given below:

Charts.LineChart line = new Charts.LineChart("Chart_Id");

Scroll

line.Scrollable = true;

Spline

The syntax to create a spline chart is given below:

Charts.SplineChart spline = new Charts.SplineChart("Chart_Id");

Area

The syntax to create a area chart is given below:

Charts.AreaChart area = new Charts.AreaChart("Chart_Id");

Stacked

The available stacked charts are:

Bar
Column
Area

The syntax to create a stacked chart is given below:

Charts.StackedChart stack = new Charts.StackedChart("Chart_Id");

Stack Type

stack.StackType = Charts.StackedChart.StackChartType.BAR; //Stacked Bar
stack.StackType = Charts.StackedChart.StackChartType.COLUMN; //Stacked Column
stack.StackType = Charts.StackedChart.StackChartType.AREA; //Stacked Area

Stacked 3D

stack.ThreeD = true;

Scroll

stack.Scrollable = true;

Combination

The syntax to create a combination is given below:

Charts.CombinationChart combiChart = new Charts.CombinationChart("id")

Combi 3D

combiChart.ThreeD = true;

Scroll

combiChart.Scrollable = true;

Dual Y-Axis

combiChart.DualY = true;

Pie

The syntax to create a pie chart is given below:

Charts.PieChart pie = new Charts.PieChart("Chart_Id");

Pie 3D

pie.ThreeD = true;

Doughnut

The syntax to create a doughnut chart is given below:

Charts.DoughnutChart doughnut = new Charts.DoughnutChart("Chart_Id");

Doughnut 3D

doughnut.ThreeD = true;

Funnel

The syntax to create a funnel is given below:

Widget.FunnelChart funnel = new Widget.FunnelChart("Widget_Id");

Pyramid

The syntax to create a pyramid is given below:

Widget.PyramidChart pyramid = new Widget.PyramidChart("Widget_Id");

Time-series

To syntax to create a time-series chart is given below:

Charts.TimeSeriesChart timeSeries = new Charts.TimeSeriesChart("id");

API's Common for All Charts

`Render()`

Renders a chart inside a container element on a page. If the chart is already rendered, it can be re-rendered inside the same container DOM element or a different element.

Syntax

visualizationObj.Render(); // visualizationObj is the chart object

`Theme`

Applies predefined themes to the chart. FusionCharts.Net visualization ships with the following predefined themes:

fusion
gammel
candy
zune
ocean
carbon

Syntax

visualizationObj.Theme = FusionChartsTheme.ThemeName.FUSION //Fusion Theme is applied

`Height`

Sets the height of the canvas.

Syntax

timeSeries.Height.Em(500);// unit EM
timeSeries.Height.Percentage(60); //unit Percentage
timeSeries.Height.Pixel(600);// unit pixel
timeSeries.Height.Point(400);//unit point

`Width`

Sets the width of the canvas.

Syntax

timeSeries.Width.Em(500); // unit EM
timeSeries.Width.Percentage(60); //unit Percentage
timeSeries.Width.Pixel(600); // unit pixel
timeSeries.Width.Point(400); //unit point

`Dispose`

Disposes the chart completely.

Syntax

visualizationObj.Dispose();

`Caption`

These API's let you configure the cosmetics of chart caption.

API	Type	Syntax	Description
`Text`	string	visualizationObj.Caption.Text = "Chart Title";	Sets the caption of the chart
`FontSize`	integer	visualizationObj.Caption.FontSize = 16;	Sets the font size of the caption
`FontName`	string	visualizationObj.Caption.FontName = "Arial";	Sets the font of the caption
`FontColor`	Hex Color Code	visualizationObj.Caption.FontColor = "#ff0000";	Sets the font color of the caption
`Bold`	boolean	visualizationObj.Caption.Bold = false;	Makes the chart caption bold
`OnTop`	boolean	visualizationObj.Caption.OnTop = true;	Places the chart caption at the top of the chart
`Alignment` (Not Applicable for time-series)	CaptionObject .CaptionAlignment	visualizationObj.Caption.Alignment = CaptionObject.CaptionAlignment.LEFT;	Sets the alignment of the chart caption
`TextAlignment` (Applicable only for time-series)	FusionTimeCaptionObject .Alignment	timeSeries.Caption.TextAlignment = FusionTimeCaptionObject.Alignment.CENTER	Sets the alignment of the chart caption. The values of `TextAlignment` enum can be `CENTER`, `LEFT`, `RIGHT`, `INHERIT`, `INITIAL`, `JUSTIFY`, `NONE`

`SubCaption`

These APIs let you configure the cosmetics of chart sub-caption.

API	Type	Syntax	Description
`Text`	string	visualizationObj.SubCaption.Text = "Chart Sub Title";	Sets the sub-caption of the chart
`FontSize`	integer	visualizationObj.SubCaption.FontSize = 16;	Sets the font size of the sub-caption
`FontName`	string	visualizationObj.SubCaption.FontName = "Arial";	Sets the font of the sub-caption
`FontColor`	Hex Color Code	visualizationObj.SubCaption.FontColor = "#ff0000";	Sets the font color of the sub-caption
`Bold`	boolean	visualizationObj.SubCaption.Bold = false;	Makes the sub-caption bold
`OnTop`	boolean	visualizationObj.SubCaption.OnTop = true;	Places the sub-caption at the top of the chart
`TextAlignment` (Applicable only for time-series)	FusionTimeSubCaptionObject .Alignment	timeSeries.SubCaption.TextAlignment = FusionTimeSubCaptionObject.Alignment.LEFT;	Sets the alignment of the chart caption. The values of `TextAlignment` enum can be `CENTER`, `LEFT`, `RIGHT`, `INHERIT`, `INITIAL`, `JUSTIFY`, `NONE`

`Labels`

These APIs let you configure the x-axis labels.

Not applicable for time-series.

API	Type	Syntax	Description
`Show`	boolean	visualizationObj.Labels.Show = true;	Shows/Hides X-axis labels
`MaxHeight`	integer	visualizationObj.Labels.MaxHeight = 500;	Sets maximum height of X-axis labels
`Ellipsis`	boolean	visualizationObj.Labels.Ellipsis = true;	Truncates X-axis label text when it’s too long, and adds ellipsis at the end
`Display`	LabelFormat	visualizationObj.Labels.Display = LabelFormat.DisplayType.AUTO;	Sets display mode for label to `AUTO`, `WRAP`, `STAGGER`, `ROTATE`, or `NONE`
`Rotate`	boolean	visualizationObj.Labels.Rotate = true;	Rotates X-axis labels and displays them in a vertical direction
`Slant`	boolean	visualizationObj.Labels.Slant = true;	Displays X-axis labels in a slanted manner
`StaggerLines`	integer	visualizationObj.Labels.StaggerLines = 2;	Displays data labels across multiple levels
`Step`	integer	visualizationObj.Labels.Step = 1;	Displays every nth data label (where n is the step value), skipping the rest
`Binsize`	integer	visualizationObj.Labels.BinSize = 1;	Sets the minimum width of a label in pixels (with a minimum value of 1)

`Values`

These APIs let you configure the data plot values.

Not applicable for time-series.

API	Type	Syntax	Description
`Show`	boolean	visualizationObj.Values.Show = true;	Shows/hides data values
`ShowLimits`	boolean	visualizationObj.Values.ShowLimits = true;	Show/hide minimum and maximum data values
`Rotate`	boolean	visualizationObj.Values.Rotate = true;	Rotates data values and displays them in a vertical direction
`ShowDivLineValues`	boolean	visualizationObj.Values.ShowDivLineValues = true;	Shows/hides values of divisional lines
`Position`	ValueFormat.ValuePosition	visualizationObj.Values.Position = ValueFormat.ValuePosition.AUTO;	Sets the position of the data value as `AUTO`, `ABOVE`, or `BELOW`
`PlotHighlightEffect`	string	visualizationObj.Values.PlotHighlightEffect = "fadeout color=#ff0000, alpha=60";	Highlights data values
`PlaceValueInside`	boolean	visualizationObj.Values.PlaceValueInside =false;	Displays data values inside data plots

`Tooltip`

These API's let you control the tool tip. You can set the background color, border color, separator character and few other details.

Not applicable for time-series.

API	Type	Syntax	Description
`Show`	boolean	visualizationObj.ToolTip.Show = true;	Shows/Hides the tooltip
`BGColor`	Hex Color Code	visualizationObj.ToolTip.BGColor = "#000000";	Sets the background color of the tooltip
`BorderColor`	Hex Color Code	visualizationObj.ToolTip.BorderColor = "#00ff00";	Sets the border color of the tooltip
`SeparatorChar`	Charater	visualizationObj.ToolTip.SeparatorChar = '/';	Sets the separator character in the tooltip text
`ShowShadow`	boolean	visualizationObj.ToolTip.ShowShadow = false;	Shows a shadow around the tooltip
`Color`	Hex Color Code	visualizationObj.ToolTip.Color = "#ff00f0";	Sets the color of the tooltip text
`BorderAlpha`	integer	visualizationObj.ToolTip.BorderAlpha = 1;	Sets the transparency of the border of the tooltip
`PlotToolText`	string	visualizationObj.ToolTip.PlotToolText = "ToolTip Text";	Sets the tooltip text

`Legend`

In a chart, the name of each dataset shows up in the legend of the chart. Using the API's below, you can configure the functional and cosmetic properties of the legend.

Not applicable for time-series.

API	Type	Syntax	Description
`Show`	boolean	visualizationObj.Legend.Show = true;	Shows/Hides the legend
`Caption`	string	visualizationObj.Legend.Caption = "Legend Caption";	Sets the caption of the legend
`Position`	LegendObject.LegendPosition	visualizationObj.Legend.Position = LegendObject.LegendPosition.RIGHT;	Sets the position of the legend 1. `BOTTOM` 2. `RIGHT`
`FontSize`	integer	visualizationObj.Legend.FontSize = 10;	Sets the font size of the legend text
`FontName`	string	visualizationObj.Legend.FontName = "Arial";	Sets the font of the legend text
`FontColor`	Hex Color Code	visualizationObj.Legend.FontColor = "#ff00f0";	Sets the font color of the legend text
`Bold`	boolean	visualizationObj.Legend.Bold = false;	Makes the legend text bold.

`Export`

FusionCharts.Net has the ability to export the rendered charts in JPG, PNG, SVG, PDF formats and export chart data as well. Using the API's below, you can configure the functional properties to export your chart.

API	Type	Syntax	Description
`Enabled`	boolean	visualizationObj.Export .Enabled = true;	Enables/disables exporting of a chart
`HandlerPath`	string	visualizationObj.Export .HandlerPath = "localhost:8189";	Sets the path of the server-side export handler
`Format`	string	visualizationObj.Export .Format = "PNG=Export as High Quality Image\|JPG\|PDF=Export as PDF File";	Sets the export format
`Mode`	Exporter .ExportMode	visualizationObj.Export .Mode = Exporter.ExportMode.SERVER;	Sets the export mode for the chart. 1. `CLIENT` 2. `SERVER`
`ShowMenuItem`	boolean	visualizationObj.Export .ShowMenuItem = false;	Shows/Hides the export menu
`ExportedFileName`	string	visualizationObj.Export .ExportedFileName = "FusionChartsExportedFile.pdf";	Sets the name of the exported file
`Window`	Exporter .ExportTargetWindow	visualizationObj.Export .Window = Exporter.ExportTargetWindow.BLANK;	Sets whether the exported chart opens in the same window or a new window 1. `BLANK` 2. `SELF`
`Action`	Exporter .ExportAction	visualizationObj.Export .Action = Exporter.ExportAction.SAVE;	Sets the action to be performed when the Export chart option is clicked. 1. `SAVE` 2. `DOWNLOAD`

`Palette Colors`

PaletteColors allows you to specify your custom list of hex colors for the visualization. The list of colors have to be separated from comma, e.g., "#5d62b5", "#afafaf", "#f2726", "#ffc533", "#62b58f", "#afafaf". The chart will cycle through the list of specified colors and then render the chart accordingly.

Syntax

// Type: String
// Argument Type: String Array
visualization.PaletteColors("#5d62b5", "#afafaf", "#f2726", "#ffc533", "#62b58f", "#afafaf");

Chart Specific API's

Following are the API's which only have support on Column, Bar, Area, Line, Spline and Stacked Charts.

`XAxis`

To configure the x-axis name (title), you can use the following APIs.

API	Type	Syntax	Description
`Text`	string	visualizationObj.XAxis.Text = "XAxis Name";	Sets the title of the X-axis
`FontSize`	integer	visualizationObj.XAxis.FontSize = 10;	Sets the font size of the X-axis title
`FontName`	string	visualizationObj.XAxis.FontName = "Arial";	Sets the font of the X-axis title
`FontColor`	Hex Color Code	visualizationObj.XAxis.FontColor = "#ff0000";	Sets the font color of the X-axis title
`Bold`	boolean	visualizationObj.XAxis.Bold = true;	Sets whether the X-axis title is displayed in bold
`Italic`	boolean	visualizationObj.XAxis.Italic = false;	Sets whether the X-axis title is displayed in Italic
`BorderColor`	Hex Color Code	visualizationObj.XAxis.BorderColor = "#ffffff";	Sets the border color of the X-axis title
`BGColor`	Hex Color Code	visualizationObj.XAxis.BGColor = "#000000";	Sets the background color of the X-axis title
`BorderThickness`	integer	visualizationObj.XAxis.BorderThickness = 2;	Sets the border thickness of the X-axis title

`Time Axis`

Time axis API's only have support on time-series charts.

To configure the time axis, you can use the following APIs.

API	Type	Syntax	Description
`PlotName`	string	timeSeries.TimeAxis .PlotName = "Order Date";	Defines the column, which will be plotted along this axis.
`TimeMarker`	TimeMarkersObject	timeSeries.TimeAxis .TimeMarker .`AddMarker`("label") .`EndDate`(new DateTime(2010, 12, 31)); .`StartDate`(new DateTime(2010, 01, 01)); .`Multiplier`(2); .`TimeFormat`(“%b-%Y”); .`TimeUnit`(TimeSeriesUnit.Time.YEAR);	AddMarker() returns an instance of TimeMarkerObject. The values of `Time` enum can be `YEAR`, `MONTH`, `DAY`, `HOUR`, `MINUTE`, `SECOND` and `MILLISECOND`.

`Time Navigator`

Time navigator only have support on time-series charts.

The time navigator plots the complete data in a rectangular box located right below the time axis. The syntax to enable the time navigator is shown below:

timeSeries.TimeNavigator.Enable = true; //Boolean

`Custom Range Selector`

Custom range selector only have support on time-series charts.

The Custom Range Selector lets you select and focus on data within a specific time period by selecting the start and end points. The syntax to enable the custom range selector is shown below:

timeSeries.CustomRangeSelector.Enable = true; //Boolean

`Standard Range Selector`

Standard range selector only have support on time-series charts.

The Standard Range Selector lets you select and focus on data within standard time periods. The syntax to enable the standard range selector is shown below:

timeSeries.StandardRangeSelector.Enable = true; //Boolean

`Reference Line`

Reference line only have support on time-series charts.

A Reference Line is essentially an arbitrary fixed line (mapped to the Y-axis), which indicates a specific value. The syntax to add a reference line is shown below:

timeSeries.ReferenceLine.Add("label", value); // (string, double)

`URL`

URL only have support on time-series charts.

The syntax to add a URL to a text is shown below:

timeSeries.ClickUrl = "www.fusioncharts.com"; //URL

`Series Name`

Series name only have support on time-series charts.

To specify the series name in the chart, use the syntax given below:

timeSeries.SeriesName = "Population"; //string

`Tooltip`

This tooltip API only have support on time-series charts.

The syntax to disable the tooltip of the time-series chart is shown below:

timeSeries.ToolTip.Enable = false; //Boolean

`Multi Canvas`

This API only have support on time-series charts.

The syntax to disable more than one canvas in a multivariate chart is shown below:

timeSeries.MultiCanvas.Enable = false;

`Binning`

Binning only have support on time-series charts.

The syntax to apply data binning to the chart is shown below:

timeSeries.TimeAxis.Binning.Year(1); // Binning to display yearly data
timeSeries.TimeAxis.Binning.Month(2,4); // Binning to display monthly data
timeSeries.TimeAxis.Binning.Day(2); // Binning to display daily data
timeSeries.TimeAxis.Binning.Hour(1); // Binning to display hourly data
timeSeries.TimeAxis.Binning.Minute(1,3,5,6); // Binning to display per minute data
timeSeries.TimeAxis.Binning.Second(2,4); // Binning to display per second data
timeSeries.TimeAxis.Binning.MilliSecond(5); // Binning to display per millisecond data

`YAxis`

To configure the y-axis name (title), you can use the following APIs.

Not applicable for time-series.

API	Type	Syntax	Description
`Text`	string	visualizationObj.YAxis.Text = "YAxis Name";	Sets the title of the Y-axis
`FontSize`	integer	visualizationObj.YAxis.FontSize = 10;	Sets the font size of the Y-axis title
`FontName`	string	visualizationObj.YAxis.FontName = "Arial";	Sets the font name of the Y-axis title
`FontColor`	Hex Color Code	visualizationObj.YAxis.FontColor = "#ff0000";	Sets the font color of the Y-axis title
`Bold`	boolean	visualizationObj.YAxis.Bold = true;	Sets whether the Y-axis title is displayed in bold
`Italic`	boolean	visualizationObj.YAxis.Italic = false;	Sets whether the Y-axis title is displayed in Italic
`BorderColor`	Hex Color Code	visualizationObj.YAxis.BorderColor = "#ffffff";	Sets the border color of the Y-axis title
`BGColor`	Hex Color Code	visualizationObj.YAxis.BGColor = "#000000";	Sets the background color of the Y-axis title
`BorderThickness`	integer	visualizationObj.YAxis.BorderThickness = 2;	Sets the border thickness of the Y-axis title

`Primary YAxis`

To configure the primary y-axis name (title), you can use the following APIs.

Applicable only for Dual YAxis charts.

API	Type	Syntax	Description
`Text`	string	visualizationObj.PrimaryYAxis.Text = "YAxis Name";	Sets the title of the primary Y-axis
`FontSize`	integer	visualizationObj.PrimaryYAxis.FontSize = 10;	Sets the font size of the primary Y-axis title
`FontName`	string	visualizationObj.PrimaryYAxis.FontName = "Arial";	Sets the font name of the primary Y-axis title
`FontColor`	Hex Color Code	visualizationObj.PrimaryYAxis.FontColor = "#ff0000";	Sets the font color of the primary Y-axis title
`Bold`	boolean	visualizationObj.PrimaryYAxis.Bold = true;	Sets whether the primary Y-axis title is displayed in bold
`Italic`	boolean	visualizationObj.PrimaryYAxis.Italic = false;	Sets whether the primary Y-axis title is displayed in Italic
`BorderColor`	Hex Color Code	visualizationObj.PrimaryYAxis.BorderColor = "#ffffff";	Sets the border color of the primary Y-axis title
`BGColor`	Hex Color Code	visualizationObj.PrimaryYAxis.BGColor = "#000000";	Sets the background color of the primary Y-axis title
`BorderThickness`	integer	visualizationObj.PrimaryYAxis.BorderThickness = 2;	Sets the border thickness of the primary Y-axis title

`Secondary YAxis`

To configure the secondary y-axis name (title), you can use the following APIs.

Applicable only for Dual YAxis charts.

API	Type	Syntax	Description
`Text`	string	visualizationObj.SecondaryYAxis.Text = "YAxis Name";	Sets the title of the secondary Y-axis
`FontSize`	integer	visualizationObj.SecondaryYAxis.FontSize = 10;	Sets the font size of the secondary Y-axis title
`FontName`	string	visualizationObj.SecondaryYAxis.FontName = "Arial";	Sets the font name of the secondary Y-axis title
`FontColor`	Hex Color Code	visualizationObj.SecondaryYAxis.FontColor = "#ff0000";	Sets the font color of the secondary Y-axis title
`Bold`	boolean	visualizationObj.SecondaryYAxis.Bold = true;	Sets whether the secondary Y-axis title is displayed in bold
`Italic`	boolean	visualizationObj.SecondaryYAxis.Italic = false;	Sets whether the secondary Y-axis title is displayed in Italic
`BorderColor`	Hex Color Code	visualizationObj.SecondaryYAxis.BorderColor = "#ffffff";	Sets the border color of the secondary Y-axis title
`BGColor`	Hex Color Code	visualizationObj.SecondaryYAxis.BGColor = "#000000";	Sets the background color of the secondary Y-axis title
`BorderThickness`	integer	visualizationObj.SecondaryYAxis.BorderThickness = 2;	Sets the border thickness of the secondary Y-axis title

To configure the y-axis for the time-series chart, you can use the following APIs.

API	Type	Syntax	Description
`Aggregation`	TimeSeriesAggregation.Function	timeSeries.YAxes .Aggregation = TimeSeriesAggregation .Function.COUNT;	The values of `function` enum can be `SUM`, `COUNT`, `MAX`, `MIN`, `LAST`, `FIRST`, `AVERAGE`, `VARIANCE` or `STDDEV`.
`AxisType`	TimeSeriesYAxisObject.YAxisType	timeSeries.YAxes .AxisType = TimeSeriesYAxisObject .YAxisType .LINEAR;	The values of `YAxisType` enum can either be `LINEAR` or `LOG`.
`Format`	object	1. timeSeries.YAxes .Format.`Prefix` = "$"; 2. timeSeries.YAxes. Format.`Suffix` = "K";	Specifies the `prefix` and `suffix` of the y-axis label.
`Max`	double	timeSeries.YAxes .Max = 30000;	This API explicitly sets the upper limit of the chart.
`Min`	double	timeSeries.YAxes. Min = 10000;	This API explicitly sets the lower limit of the chart.
`PlotType`		timeSeries.YAxes. PlotType = TimeSeriesYAxisObject. SeriesPlotType. AREA;	The values of `PlotType` enum can be `LINE`, `COLUMN`, `AREA`, `SPLINE`, `STEPLINE`, `OHLC` and `CANDLESTICK`
`Title`	string	timeSeries.YAxes. Title = "Total Sales";	Specifies the y-axis title of the chart.
`Plot`	object	1. timeSeries.YAxes.Plot .Add("GDP"); 2. timeSeries.YAxes.Plot .Add("GDP", TimeSeriesYAxisObject .SeriesPlotType.AREA); 3. timeSeries.YAxes.Plot .Add("GDP", TimeSeriesAggregation .Function.LAST); 4. timeSeries.YAxes.Plot .Add("GDP", TimeSeriesYAxisObject .SeriesPlotType.AREA, TimeSeriesAggregation .Function.LAST);5. timeSeries.YAxes.Plot .Add("label", false); 6. timeSeries.YAxes.Plot .Add("label", TimeSeriesYAxisObject .SeriesPlotType.AREA, TimeSeriesAggregation.Function .LAST,false);	Add plots when we render multiple data plots in a chart.
`Orientation`	TimeSeriesYAxisObject.OrientationType	timeSeries.YAxes.Orientation = TimeSeriesYAxisObject.OrientationType.LEFT;	The values of `Orientation` enum can be `LEFT`, or `RIGHT`.
`LogBase`	integer	timeSeries.YAxes.LogBase = 10;	Sets the base of the axis if the time-series chart has a logarithmic y-axis.

`Data` (column, bar, line, area, spline, stack, combination)

Data is an object used to define the values to be plotted for individual data series. The instances in Data object is listed below:

source: FusionCharts Data Model

visualizationObj.Data.Source = dataSource; //dataSource is an instance of the DataModel

CategoryField(string field_name)

visualizationObj.Data.CategoryField("country");

SeriesFields(params string[ ] fields_name)

visualizationObj.Data.SeriesFields("Sales,Total_Purchase");

Categories: Category Object

API	Type	Syntax	Description
`FontSize`	integer	visualizationObj.Data.Categories .FontSize = 10;	Sets the font size of the X-axis title
`FontName`	string	visualizationObj.Data.Categories .FontName = "Arial";	Sets the font of the X-axis title
`FontColor`	Hex Color Code	visualizationObj.Data.Categories .FontColor = "#ffffff";	Sets the font color of the X-axis title
`CategoryFormatting`	Methods of Category object which accepts category name as string parameter.	visualisationObj.Data.Categories .CategoryFormatting("india") .`ShowLabel`(true) .`ToolText`("Country:India") .`FontName`("Arial") .`FontColor`("#ff000f") .`FontSize`(12) .`Bold`(false) .`Italic`(true) .`LabelLink` ("localhost:CountryDetails") .`BorderColor`("#000000") .`BGColor`("#000000") .`Alpha`(100);	This instance is used to customize the specific categories of the chart. Following are the instance methods of `CategoryFormatting`: 1. ShowLabel(boolean) 2. ToolText(string) 3. FontName(string) 4. FontColor(Hex Color code(string)) 5. FontSize(integer) 6. Bold(boolean) 7. Italic(boolean) 8. LabelLink(string) 9. BorderColor(Hex Color Code(string)) 10. BGColor(Hex Color Code(string)) 11. Alpha(integer)

Series: Series Object

Series is an object used to customize the series of data plots. The instances of the DataModel in Series object is listed below:

API	Type	Syntax	Description
`SeriesFormatting`	Method of `Series` Object which accepts series field name as string.	visualisationObj.Data.Series .SeriesFormatting("Series_Name") .`Alpha`(100) .`Color`("ff00ff") .`Dashed`(false) .`DisplayName`("Yearly sales") .`Visible`(true) .`ShowValues`(true);	This instance is used to customize the selected series of the chart. Following are the instance methods of `SeriesFormatting`: 1. Alpha(integer) 2. Color(Hex Color Code(string)) 3. Dashed(boolean) 4. DisplayName(string) 5. Visible(boolean) 6. ShowValues(boolean)
`ValueFormatting`	Method of `Series` object which accepts conditional query as string.	visualisationObj.Data .ValueFormatting("value > 100 and value < 500") .`Alpha`(100) .`Color`("ff0000) .`Dashed`(false) .`ShowValue`(true) .`Link`("www.fusioncharts.com") .`DisplayValue`("value > 100") .`ToolText`("country wise sales value") .`ValuePosition` (ValueFormat.ValuePosition.ABOVE); Note: `ValueFormatting` can be applied to a specific series by specifying the series name. visualisationObj.Data .ValueFormatting("SERIESNAME", "CONDITION")	This instance is used to customize specific values of the chart. Following are the instance methods of `ValueFormatting`: 1. Alpha(integer) 2. Color(Hex Color Code(string)) 3. Dashed(boolean) 4. ShowValue(boolean) 5. Link(string) 6. DisplayValue(string) 7. ToolText(string) 8. ValuePosition(Enum)

Following are the APIs only applicable for combination chart.

API	Type	Syntax	Description
`ColumnPlots`	string[] (Field's name)	combiChart.Data .ColumnPlots("field1","field2");	Sets `column` as plot type
`LinePlots`	string[] (Field's name)	combiChart.Data .LinePlots("field3");	Sets `line` as plot type
`AreaPlots`	string[] (Field's name)	combiChart.Data .AreaPlots("field4","field5");	Sets `area` as plot type
`SplinePlots`	string[] (Field's name)	combiChart.Data .SplinePlots("field6","field7","field8");	Sets `spline` as plot type
`SplineAreaPlots`	string[] (Field's name)	combiChart.Data .SplineAreaPlots("field9");	Sets `splineArea` as plot type

Set Parent Axis

API	Type	Syntax	Description
`PrimaryYAxisAsParent`	string[] (All fields which has `ParentAxis` as the `PrimaryYAxis`)	combiChart.Data .SecondaryYAxisAsParent("field3");	Set the primary y-axis as parent axis
`SecondaryYAxisAsParent`	string[] (All fields which has `ParentAxis` as the `SecondaryYAxis`)	combiChart.Data .PrimaryYAxisAsParent("field4",”field6”);	Sets the secondary y-axis as parent axis

Following are the API's which only have support on Pie, Doughnut, Funnel and Pyramid Charts.

`Data` (pie, doughnut, pyramid, funnel)

Data is an object used to define the values to be plotted for individual data series. The instances of the DataModel in Data object is listed below:

API	Type	Syntax	Description
`Source`	FusionCharts Data Model	visualizationObj.Data .Source = dataSource;	Sets the data source of the data model. `dataSource` is an instance of the DataModel.
`CategoryField`		visualizationObj.Data .CategoryField("Country");	Specifies the category field.
`SeriesField`		visualizationObj.Data .SeriesField("Sales");	Specifies the series field.
`LabelFormatting`		visualisationObj.Data .LabelFormatting("label_name") .`ShowLabel`(true) .`ToolText`("Country:India") .`FontName`("Arial") .`FontColor`("#ff000f") .`FontSize`(12) .`Bold`(false) .`Italic`(true) .`LabelLink` ("www.fusioncharts.com/") .`BorderColor`("000000") .`BGColor`("000000") .`Alpha`(100);	This instance is used to customize a specific label of a data plot. Following are the instance methods of `LabelFormatting`: 1. ShowLabel(boolean) 2. ToolText(string) 3. FontName(string) 4. FontColor(Hex Color Code(string)) 5. FontSize(integer) 6. Bold(boolean) 7. Italic(boolean) 8. LabelLink(string) 9. BorderColor(Hex Color Code(string)) 10. BGColor(Hex Color Code(string)) 11. Alpha(integer)
`ValueFormatting`		visualisationObj.Data .ValueFormatting ("value > 100 and value < 500") .`Alpha`(100) .`Color`("ff0000) .`Dashed`(false) .`ShowValue`(true) .`Link`("www.fusioncharts.com") .`DisplayValue`("value > 100") .`ToolText`("country wise sales value") .`ValuePosition` (MultiSeriesDataElement .ValuePlaced position.ABOVE);	This instance is used to customize specific values of the chart. Following are the instance methods of `ValueFormatting`: 1. Alpha(integer) 2. Color(Hex Color Code(string)) 3. Dashed(boolean) 4. ShowValue(boolean) 5. Link(string) 6. DisplayValue(string) 7. ToolText(string) 8. ValuePosition(Enum)

`Data` (time-series)

Data is an object used to define the values to be plotted for individual data series. The data object of the time-series chart is shown below:

timeSeries.Data.SourcePathHandler = “/path/to/local/DataSourceHandler.ashx”;

`Plot Configuration` (time-series)

Generic Plot

Generic plot configurations apply to all plot types in your chart. The types of generic plot are given below:

AnchorStyle object

Set the anchor style in your chart using the AnchorStyle object. Refer to the code given below:

timeSeries.PlotConfig.Generic.AnchorStyle.FillColor = "#ff0000";
timeSeries.PlotConfig.Generic.AnchorStyle.StrokeColor = "#ffffff";
timeSeries.PlotConfig.Generic.AnchorStyle.StrokeLineCap = PlotStyleConfigurationObject.LineCap.ROUND;
timeSeries.PlotConfig.Generic.AnchorStyle.StrokeWidth = 2;

In the above code:

timeSeries, PlotConfig, Generic, and AnchorStyle are objects.
FillColor is a properties of the AnchorStyle object, which accepts the hex code or the name of a color as a string.
StrokeLineCap is a properties of the AnchorStyle object. It accepts the shape of the anchor. Here, its value is set as ROUND via the PlotStyleConfigurationObject.LineCap enum.
StrokeWidth is a property of AnchorStyle, and accepts the thickness of the anchor border as an integer. Here, its value is set as 2.

AreaStyle object

Configure the style of your area plot using the AreaStyle object. Refer to the code given below:

timeSeries.PlotConfig.Generic.AreaStyle.FillColor = "#ff0000";
timeSeries.PlotConfig.Generic.AreaStyle.StrokeColor = "#ffffff";
timeSeries.PlotConfig.Generic.AreaStyle.StrokeLineCap = PlotStyleConfigurationObject.LineCap.ROUND;
timeSeries.PlotConfig.Generic.AreaStyle.StrokeWidth = 2;

BearStyle object

Configure the style of your bear plot using the BearStyle object. Refer to the code given below:

timeSeries.PlotConfig.Generic.BearStyle.FillColor = "#ff0000";
timeSeries.PlotConfig.Generic.BearStyle.StrokeColor = "#ffffff";
timeSeries.PlotConfig.Generic.BearStyle.StrokeLineCap = PlotStyleConfigurationObject.LineCap.ROUND;
timeSeries.PlotConfig.Generic.BearStyle.StrokeWidth = 2;

BullStyle object

Configure the style of your bull plot using the BullStyle object. Refer to the code given below:

timeSeries.PlotConfig.Generic.BullStyle.FillColor = "#ff0000";
timeSeries.PlotConfig.Generic.BullStyle.StrokeColor = "#ffffff";
timeSeries.PlotConfig.Generic.BullStyle.StrokeLineCap = PlotStyleConfigurationObject.LineCap.ROUND;
timeSeries.PlotConfig.Generic.BullStyle.StrokeWidth = 2;

ColumnStyle object

Configure the style of your column plot using the ColumnStyle object. Refer to the code given below:

timeSeries.PlotConfig.Generic.ColumnStyle.FillColor = "#ff0000";
timeSeries.PlotConfig.Generic.ColumnStyle.StrokeColor = "#ffffff";
timeSeries.PlotConfig.Generic.ColumnStyle.StrokeLineCap = PlotStyleConfigurationObject.LineCap.ROUND;
timeSeries.PlotConfig.Generic.ColumnStyle.StrokeWidth = 2;

LineStyle object

Configure the style of your bull plot using the BullStyle object. Refer to the code given below:

timeSeries.PlotConfig.Generic.LineStyle.FillColor = "#ff0000";
timeSeries.PlotConfig.Generic.LineStyle.StrokeColor = "#ffffff";
timeSeries.PlotConfig.Generic.LineStyle.StrokeLineCap = PlotStyleConfigurationObject.LineCap.ROUND;
timeSeries.PlotConfig.Generic.LineStyle.StrokeWidth = 2;

PlotStyle object

Configure the plot style in your chart using properties of the PlotStyle object. Refer to the code given below:

timeSeries.PlotConfig.Generic.PlotStyle.FillColor = "#ff0000";
timeSeries.PlotConfig.Generic.PlotStyle.StrokeColor = "#ffffff";
timeSeries.PlotConfig.Generic.PlotStyle.StrokeLineCap = PlotStyleConfigurationObject.LineCap.ROUND;
timeSeries.PlotConfig.Generic.PlotStyle.StrokeWidth = 2;

ConnectNullData properties

Connect the points with null value in your line or area plots using the Boolean type ConnectNullData properties of the Generic object. Refer to the code given below:

timeSeries.PlotConfig.Generic.ConnectNullData = true;

Column Plot

Configure the style of columns in column charts using properties of the ColumnStyle object. Refer to the code given below:

timeSeries.PlotConfig.Column.ColumnStyle.FillColor = "#ff0000";
timeSeries.PlotConfig.Column.ColumnStyle.StrokeColor = "#ffffff";
timeSeries.PlotConfig.Column.ColumnStyle.StrokeLineCap = PlotStyleConfigurationObject.LineCap.ROUND;
timeSeries.PlotConfig.Column.ColumnStyle.StrokeWidth = 2;

PlotStyle object

Configure the plot style in your column chart using properties of the PlotStyle object. Refer to the code given below:

timeSeries.PlotConfig.Column.PlotStyle.FillColor = "#ff0000";
timeSeries.PlotConfig.Column.PlotStyle.StrokeColor = "#ffffff";
timeSeries.PlotConfig.Column.PlotStyle.StrokeLineCap = PlotStyleConfigurationObject.LineCap.ROUND;
timeSeries.PlotConfig.Column.PlotStyle.StrokeWidth = 2;

Line Plot

Configure the style of lines in line charts using properties of the LineStyle object. Refer to the code given below:

timeSeries.PlotConfig.Line.LineStyle.FillColor = "#ff0000";
timeSeries.PlotConfig.Line.LineStyle.StrokeColor = "#ffffff";
timeSeries.PlotConfig.Line.LineStyle.StrokeLineCap = PlotStyleConfigurationObject.LineCap.ROUND;
timeSeries.PlotConfig.Line.LineStyle.StrokeWidth = 2;

PlotStyle object

Configure the plot style in your line chart using properties of the PlotStyle object. Refer to the code given below:

timeSeries.PlotConfig.Line.PlotStyle.FillColor = "#ff0000";
timeSeries.PlotConfig.Line.PlotStyle.StrokeColor = "#ffffff";
timeSeries.PlotConfig.Line.PlotStyle.StrokeLineCap = PlotStyleConfigurationObject.LineCap.ROUND;
timeSeries.PlotConfig.Line.PlotStyle.StrokeWidth = 2;

ConnectNullData properties

Connect the points with null value in your line plots using the Boolean type ConnectNullData properties of the Line object. Refer to the code given below:

timeSeries.PlotConfig.Line.ConnectNullData = true;

StepLine plot

Configure the style of lines in step-line charts using properties of the LineStyle object. Refer to the code given below:

timeSeries.PlotConfig.StepLine.LineStyle.FillColor = "#ff0000";
timeSeries.PlotConfig.StepLine.LineStyle.StrokeColor = "#ffffff";
timeSeries.PlotConfig.StepLine.LineStyle.StrokeLineCap = PlotStyleConfigurationObject.LineCap.ROUND;
timeSeries.PlotConfig.StepLine.LineStyle.StrokeWidth = 2;

PlotStyle object

Configure the plot style in your step-line chart using properties of the PlotStyle object. Refer to the code given below:

timeSeries.PlotConfig.StepLine.PlotStyle.FillColor = "#ff0000";
timeSeries.PlotConfig.StepLine.PlotStyle.StrokeColor = "#ffffff";
timeSeries.PlotConfig.StepLine.PlotStyle.StrokeLineCap = PlotStyleConfigurationObject.LineCap.ROUND;
timeSeries.PlotConfig.StepLine.PlotStyle.StrokeWidth = 2;

ConnectNullData properties

Connect the points with null value in your step-line plots using the Boolean type ConnectNullData properties of the StepLine object. Refer to the code given below:

timeSeries.PlotConfig.StepLine.ConnectNullData = true;

SmoothLine plot

Configure the style of lines in smooth line charts using properties of the LineStyle object. Refer to the code given below:

timeSeries.PlotConfig.SmoothLine.LineStyle.FillColor = "#ff0000";
timeSeries.PlotConfig.SmoothLine.LineStyle.StrokeColor = "#ffffff";
timeSeries.PlotConfig.SmoothLine.LineStyle.StrokeLineCap = PlotStyleConfigurationObject.LineCap.ROUND;
timeSeries.PlotConfig.SmoothLine.LineStyle.StrokeWidth = 2;

PlotStyle object

Configure the plot style in your smooth line chart using properties of the PlotStyle object. Refer to the code given below:

timeSeries.PlotConfig.SmoothLine.PlotStyle.FillColor = "#ff0000";
timeSeries.PlotConfig.SmoothLine.PlotStyle.StrokeColor = "#ffffff";
timeSeries.PlotConfig.SmoothLine.PlotStyle.StrokeLineCap = PlotStyleConfigurationObject.LineCap.ROUND;
timeSeries.PlotConfig.SmoothLine.PlotStyle.StrokeWidth = 2;

ConnectNullData properties

Connect the points with null value in your smooth line plots using the Boolean type ConnectNullData properties of the SmoothLine object. Refer to the code given below:

timeSeries.PlotConfig.SmoothLine.ConnectNullData = true;

Area plot

Configure the style of areas in area charts using properties of the AreaStyle object. Refer to the code given below:

timeSeries.PlotConfig.Area.AreaStyle.FillColor = "#ff0000";
timeSeries.PlotConfig.Area.AreaStyle.StrokeColor = "#ffffff";
timeSeries.PlotConfig.Area.AreaStyle.StrokeLineCap = PlotStyleConfigurationObject.LineCap.ROUND;
timeSeries.PlotConfig.Area.AreaStyle.StrokeWidth = 2;

LineStyle object

Configure the style of boundary lines in area charts using properties of the LineStyle object. Refer to the code given below:

timeSeries.PlotConfig.Area.LineStyle.FillColor = "#ff0000";
timeSeries.PlotConfig.Area.LineStyle.StrokeColor = "#ffffff";
timeSeries.PlotConfig.Area.LineStyle.StrokeLineCap = PlotStyleConfigurationObject.LineCap.ROUND;
timeSeries.PlotConfig.Area.LineStyle.StrokeWidth = 2;

ConnectNullData Properties

Connect the points with null value in your area plot using the Boolean type ConnectNullData properties of the Area object. Refer to the code given below:

timeSeries.PlotConfig.Area.ConnectNullData = true;

StepArea plot

Configure the style of areas in step-area charts using properties of the AreaStyle object. Refer to the code given below:

timeSeries.PlotConfig.StepArea.AreaStyle.FillColor = "#ff0000";
timeSeries.PlotConfig.StepArea.AreaStyle.StrokeColor = "#ffffff";
timeSeries.PlotConfig.StepArea.AreaStyle.StrokeLineCap = PlotStyleConfigurationObject.LineCap.ROUND;
timeSeries.PlotConfig.StepArea.AreaStyle.StrokeWidth = 2;

LineStyle object

Configure the style of boundary lines of the plot in step-area charts using properties of the LineStyle object. Refer to the code given below:

timeSeries.PlotConfig.StepArea.LineStyle.FillColor = "#ff0000";
timeSeries.PlotConfig.StepArea.LineStyle.StrokeColor = "#ffffff";
timeSeries.PlotConfig.StepArea.LineStyle.StrokeLineCap = PlotStyleConfigurationObject.LineCap.ROUND;
timeSeries.PlotConfig.StepArea.LineStyle.StrokeWidth = 2;

ConnectNullData Properties

Connect the points with null value in your step-area plot using the Boolean type ConnectNullData properties of the Area object. Refer to the code given below:

timeSeries.PlotConfig.Area.ConnectNullData = true;

SmoothArea plot

Configure the style of areas in step-area charts using properties of the AreaStyle object. Refer to the code given below:

timeSeries.PlotConfig.SmoothArea.AreaStyle.FillColor = "#ff0000";
timeSeries.PlotConfig.SmoothArea.AreaStyle.StrokeColor = "#ffffff";
timeSeries.PlotConfig.SmoothArea.AreaStyle.StrokeLineCap = PlotStyleConfigurationObject.LineCap.ROUND;
timeSeries.PlotConfig.SmoothArea.AreaStyle.StrokeWidth = 2;

LineStyle object

Configure the style of boundary lines in smooth area charts using properties of the LineStyle object. Refer to the code given below:

timeSeries.PlotConfig.SmoothArea.LineStyle.FillColor = "#ff0000";
timeSeries.PlotConfig.SmoothArea.LineStyle.StrokeColor = "#ffffff";
timeSeries.PlotConfig.SmoothArea.LineStyle.StrokeLineCap = PlotStyleConfigurationObject.LineCap.ROUND;
timeSeries.PlotConfig.SmoothArea.LineStyle.StrokeWidth = 2;|

ConnectNullData Properties

Connect the points with null value in your smooth area plot using the Boolean type ConnectNullData properties of the SmoothArea object. Refer to the code given below:

timeSeries.PlotConfig.SmoothArea.ConnectNullData = true;

OHLC plot

BearStyle Object

Configure bear style OHLC plots using properties of the BearStyle object. Refer to the code given below:

timeSeries.PlotConfig.OHLC.BearStyle.FillColor = "#ff0000";
timeSeries.PlotConfig.OHLC.BearStyle.StrokeColor = "#ffffff";
timeSeries.PlotConfig.OHLC.BearStyle.StrokeLineCap = PlotStyleConfigurationObject.LineCap.ROUND;
timeSeries.PlotConfig.OHLC.BearStyle.StrokeWidth = 2;

BullStyle object

Configure bull style OHLC plots using properties of the BullStyle object. Refer to the code given below:

timeSeries.PlotConfig.OHLC.BullStyle.FillColor = "#ff0000";
timeSeries.PlotConfig.OHLC.BullStyle.StrokeColor = "#ffffff";
timeSeries.PlotConfig.OHLC.BullStyle.StrokeLineCap = PlotStyleConfigurationObject.LineCap.ROUND;
timeSeries.PlotConfig.OHLC.BullStyle.StrokeWidth = 2;

CandleStick plot

BearStyle Object

Configure bear style Candlestick plots using properties of the BearStyle object. Refer to the code given below:

timeSeries.PlotConfig.CandleStick.BearStyle.FillColor = "#ff0000";
timeSeries.PlotConfig.CandleStick.BearStyle.StrokeColor = "#ffffff";
timeSeries.PlotConfig.CandleStick.BearStyle.StrokeLineCap = PlotStyleConfigurationObject.LineCap.ROUND;
timeSeries.PlotConfig.CandleStick.BearStyle.StrokeWidth = 2;

BullStyle object

Configure bull style Candlestick plots using properties of the BullStyle object. Refer to the code given below:

timeSeries.PlotConfig.CandleStick.BullStyle.FillColor = "#ff0000";
timeSeries.PlotConfig.CandleStick.BullStyle.StrokeColor = "#ffffff";
timeSeries.PlotConfig.CandleStick.BullStyle.StrokeLineCap = PlotStyleConfigurationObject.LineCap.ROUND;
timeSeries.PlotConfig.CandleStick.BullStyle.StrokeWidth = 2;

`Data Marker`

Data marker API's only have support on time-series charts.

A data marker marks a single point on the data plot of a time-series chart. To configure the data marker, use the following APIs:

API	Type	Syntax	Description
`AddMarker`	string	timeSeries.DataMarker. AddMarker("series name") .`Identifier`('.') .`Time`("Oct-1987") .`ToolText`("Stock market crash") .`Type`(TimeSeries.DataMarker .MarkerType.FLAG) .`TimeFormat`("%b-%Y");	The values of `MarkerType` enum can be `FLAG` and `PIN`.

Date/time Format

List of available date/time format is given below:

Date/Time Format	Description
`%a`	Abbreviated weekday name.
`%A`	Full weekday name.
`%b`	Abbreviated month name.
`%B`	Full month name.
`%d`	Zero-padded day of the month as a decimal number [01,31].
`%H`	Hour (24-hour clock) as a decimal number [00,23].
`%I`	Hour (12-hour clock) as a decimal number [01,12].
`%j`	Day of a year as a decimal number [001,366].
`%m`	Month as a decimal number [01,12].
`%M`	Minute as a decimal number [00,59].
`%L`	Milliseconds as a decimal number [000, 999].
`%p`	Can either be AM or PM.
`%S`	Second as a decimal number [00, 61].
`%y`	A year without century as a decimal number [00,99].
`%Y`	A year with century as a decimal number [2000, 1999].
`%Z`	Time Zone offset, such as -0700, -07:00, -07, or Z.
`%%`	A literal percent sign (%)

Visualization API

API's to create Charts

Column

Bar

Line

Spline

Area

Stacked

Combination

Pie

Doughnut

Funnel

Pyramid

Time-series

API's Common for All Charts

Render()

Theme

Height

Width

Dispose

Caption

SubCaption

Labels

Values

Tooltip

Legend

Export

Palette Colors

Chart Specific API's

XAxis

Time Axis

Time Navigator

Custom Range Selector

Standard Range Selector

Reference Line

URL

Series Name

Tooltip

Multi Canvas

Binning

YAxis

Primary YAxis

Secondary YAxis

Data (column, bar, line, area, spline, stack, combination)

Data (pie, doughnut, pyramid, funnel)

Data (time-series)

Plot Configuration (time-series)

Generic Plot

Column Plot

Line Plot

StepLine plot

SmoothLine plot

Area plot

StepArea plot

SmoothArea plot

OHLC plot

CandleStick plot

Data Marker

Date/time Format

Hi, I am Debargho. I wrote this article.

`Render()`

`Theme`

`Height`

`Width`

`Dispose`

`Caption`

`SubCaption`

`Labels`

`Values`

`Tooltip`

`Legend`

`Export`

`Palette Colors`

`XAxis`

`Time Axis`

`Time Navigator`

`Custom Range Selector`

`Standard Range Selector`

`Reference Line`

`URL`

`Series Name`

`Tooltip`

`Multi Canvas`

`Binning`

`YAxis`

`Primary YAxis`

`Secondary YAxis`

`Data` (column, bar, line, area, spline, stack, combination)

`Data` (pie, doughnut, pyramid, funnel)

`Data` (time-series)

`Plot Configuration` (time-series)

`Data Marker`