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 (%)