Skins Support
Unlimited Data Series
Essential Chart has been optimized to handle very large sets of data.
feature image
Unlimited Number Of Data Series
Unlimited Data Points
Users can add an unlimited number of data points to a chart series.
feature image
Unlimited Data Points in a Series
Real-Time Charting
Essential Chart is optimized to deal with real-time data. It can work with a large amount of real-time data to render any type of dynamic chart.
feature image
Real-Time chart
Rich Styles Architecture
Essential Chart has a rich styles architecture that separates the display styles from the data model and provides great flexibility in defining the appearance of each display element. Style can be inherited from a parent chart, making complex formatting relatively easy.
feature image
Rich styles
Unlimited Data Series
Essential Chart has been optimized to handle very large sets of data.
feature image
Unlimited Number Of Data Series
Unlimited Data Points
Users can add an unlimited number of data points to a chart series.
feature image
Unlimited Data Points in a Series
Real-Time Charting
Essential Chart is optimized to deal with real-time data. It can work with a large amount of real-time data to render any type of dynamic chart.
feature image
Real-Time chart
Rich Styles Architecture
Essential Chart has a rich styles architecture that separates the display styles from the data model and provides great flexibility in defining the appearance of each display element. Style can be inherited from a parent chart, making complex formatting relatively easy.
feature image
Rich styles
Data Binding
Easily transform your data into stunning charts with a few lines of code using the powerful data-binding features offered by Essential Chart. You can bind a chart to the common JSON data or any IList. JSON DataPouplate with Client Side APIsAny IList in the server
Chart Types
Essential Chart for HTML 5 supports various chart types including line charts, step line charts, spline charts, pie charts, column charts, area charts, step area charts and spline area charts
feature image
HTML 5 Line Chart
feature image
HTML 5 Spline Chart
feature image
HTML 5 Column Chart
feature image
HTML 5 Area Chart
feature image
HTML 5 Spline Area Chart
feature image
HTML 5 Step Area Chart
feature image
HTML 5 Step Line Chart
feature image
HTML 5 Pie Chart
Appearance
Essential Chart for HTML 5 supports various options to customize the look and feel of the charts. You can render professional-looking charts with gradient colors or custom images in a chart's interior and other chart areas.
feature image
HTML 5 Chart Appearance
Series Border
Border customization options are also available for data points in a chart's data series.
feature image
Customized Series Border Thickness
Chart Font
Customized fonts can be rendered for all text appearing in a chart.
feature image
Chart with Custom Fonts
User Interactions
Essential Chart for HTML 5 supports user interactions like showing ToolTips. ToolTips associated with all the chart regions are visible when the pointer hovers over the corresponding region.
feature image
HTML 5 Chart ToolTips
Data Binding
Easily transform your data into stunning charts with a few lines of code using the powerful data-binding features offered by Essential Chart. You can bind a chart to any data source that implements IList. Here is the full list of data sources supported: any IListLINQDataTableXMLDataProviderObjectDataProvider
Area Charts
Simple Area Chart
A simple area chart shades the area under a curve formed by the data points in a series. Multiple series result in overlapped areas. This chart type is used to display the trends of values over time or categories.
feature image
Simple Area Chart
Spline Area Chart
A spline area chart is an area chart with a smooth spline curve connecting the data points.
feature image
Spline Area Chart
Stacked Area Chart
Stacked area charts are area charts with y-coordinate values stacked over one another in order of series. Chart data can be viewed as a sum of series parts in this chart type.
feature image
Stacked Area Chart
Step Area chart
Step area charts are similar to regular area charts where, instead of a straight line tracing the shortest path between points, the values are connected by continuous vertical and horizontal lines that form a step-like progression.
feature image
Step Area Chart
Bar Charts
Simple Bar Chart
A bar chart is the simplest and most versatile of all statistical diagrams. It compares values across categories and is ideal to highlight variations in an item value over time using horizontal bars. Points from adjacent series are drawn as bars next to each other.
feature image
Simple Bar Chart
Stacked Bar Chart
Stacked bar charts are bar charts with y-coordinate values stacked over one another in order of series. Chart data can be viewed as the sum of series parts when using the stacked bar chart.
feature image
Stacked Bar Chart
Gantt Chart
Frequently used in project management, a Gantt chart provides a graphical illustration of a schedule to help plan, coordinate, and track specific tasks of a project.
Key features:
Provides a graphical representation of the duration of the task against the progression of time. Each task takes up one row. The expected time requirement for each task is represented by a horizontal bar whose left and right ends mark the beginning and completion date of the task. Another bar, usually rendered behind the previously mentioned bar, is used to represent the progression of the task. Tasks may run in a sequential, parallel, or overlapped fashions.
feature image
Gantt Chart
Histogram Chart
A histogram is a bar (column) chart of a frequency distribution in which the width of a bar is proportional to the variable class and the height of a bar is proportional to the class frequency. The categories (bars) are generally non-overlapping intervals of the variable, and must be continuous. In addition, the chart has the capability to display a normal distribution curve.
feature image
Histogram Chart
Tornado Chart
A tornado chart is a bar chart that shows the variability of an output with respect to different inputs. Variability is displayed using relative lengths of bars across a range. It is mainly used in sensitivity analysis and shows how different random factors can influence the prognostic outcome of a variable.
feature image
Tornado Chart
Column Charts
Simple Column Chart
Column charts are the most commonly used charts, where the data points are displayed by vertical bars. It is similar to a bar chart, except that the bars are vertical and not horizontal.
Key Features:
Used for comparing the frequency, count, total, or average of data in different categories.Ideal for displaying variations in the value of an item over time.Points from adjacent series are drawn as bars next to each other.Error bars are supported to indicate a degree of uncertainty in the plotted data through a bar indicating a range. Plenty of symbol options are available to be rendered on error bars.
feature image
Error Bars in a Column Chart
Stacked Column Chart
Data points from different series are rendered one over the other in the stacked column chart. They are very useful for indicating the cumulative effect of multiple series values.
feature image
Stacked Column Chart
100% Stacked Column Chart
In a 100% stacked column chart, the cumulative proportion of each stacked element always totals 100%. This type of chart is great to visualize the relative contribution of each series values to the whole.
feature image
100% Stacked Column Chart
Line Charts
Line charts refer to charts where the data points on a plot are joined using straight or curved 2–D or 3–D lines. These charts are ideal to represent time-dependent data that show trends in data at equal intervals.
Error bars, which are used to indicate a level of uncertainty in the points that are plotted, can also be included.
feature image
Error Bars in a Line Chart
Spline Chart
A spline chart is a line-chart with a smooth line connecting the data points.
feature image
Spline Chart
Step Line Chart
Step line charts use horizontal and vertical lines to connect data points, resulting in a step-like progression.
feature image
Step Line Chart
Rotated Spline Chart
A rotated spline chart is a spline chart rotated 90 degrees. It is useful for visualizing how far data points deviate from a median value.
feature image
Rotated Spline Chart
Pie Charts
Pie Chart
Pie and doughnut charts are ideal for displaying percentages in a fractional format of proportionate values.
Key features:
Plots y values in one series as fractional parts of a circle.The data point value determines the portion of the pie that is taken up by the point.Displays only one data series at a time.Can be used to display only nominal (categorical, qualitative) data.Each data item in a chart has a unique color or pattern and is represented in the chart legend.Supports bevel, round, inside, outside, and custom chart types.
feature image
Pie Chart
Accumulation Charts
Accumulation charts are typically single-series charts that represent data in percentages and do not utilize axes.
Funnel Chart
A funnel chart is a type of accumulation chart in which the height of the funnel segment corresponds to the y-coordinate value of a point in a series. Funnel charts are often used to represent stages in a sales process and display the potential revenue for each stage. Alternatively, the y-coordinate value can also be made to correspond to the width of the segment.
feature image
Funnel Chart with a Circular Base
feature image
3-D Funnel Chart with a Square Base
Pyramid Chart
A pyramid chart is another type of accumulation chart that is triangular in shape. Similar to a funnel chart, the height of a segment is proportional to the y-coordinate value of the corresponding point.
Note that the base of the pyramid can be square or circular.
feature image
Pyramid Chart with a Circular Base
feature image
3–D Pyramid Chart with a Square Base
Combination Charts
A combination chart uses two or more chart types to emphasize that the chart contains different kinds of information.
Note: Only chart types that are compatible with each other may be combined in the same chart area.Combining different chart types on the same chart lets users display complicated data.
feature image
Combination Chart
Circular Charts
Radar Charts
A radar chart is a clock-face form of a line chart.
Key features:
Ability to compare the aggregate values of a data series.Represents each data series as a line around a central point.Provides a graphical display of the difference between actual and ideal performance.Useful for defining performance, and identifying strengths and weaknesses.
feature image
Radar Chart
Polar Charts
A polar chart is a circular graph in which data is displayed in terms of values and angles.
Key features:
An option is provided to perform a visual comparison between several quantitative or qualitative aspects.When charts are drawn for several situations using the same axes (poles), a visual comparison between the situations can be made.The x-coordinate value of a data point is used to set the angle.The y-coordinate value defines the distance from the center of the graph.
feature image
Polar Chart
3-D Mode
Essential Chart supports 3-D mode for all chart types except polar and radar.
feature image
3-D Stacked Bar Chart
The depth of the axis in z-axis can be customized through the Depth property.
feature image
3–D Pie Chart with Custom Depth Value
The Real Mode option displays a chart in a 3-D plane. Users can also use the Rotation or Tilt properties to rotate the control programmatically.
feature image
3-D Real Mode
Spacing Effect
Spacing between Data Series
Spacing helps customize the space between series to give charts an uncluttered appearance. The spacing is calculated as a percentage and the default percentage value is 10. Increased spacing between columns automatically reduces the column widths.
feature image
No Space between Data Series
feature image
Spacing between Data Series (50%)
Spacing between Data Series in 3-D Mode
There is also support to control the spacing between data series in 3-D mode. Spacing is set as a percentage value of the z-axis depth of a column.
feature image
Spacing between Data Series in 3-D Mode
Anti-Aliasing
Essential Chart supports rendering of the chart in different ways using the SmoothingMode property. The default option is anti-alias. It smoothes the jagged edges of the graphical output.
feature image
Anti-Aliasing
Chart Interior
You can render professional-looking charts with gradient colors in a chart's interior and other chart areas.
feature image
Customized Chart Interior
Chart Border
Essential Chart supports 13 different border styles. The interior style and the size of the chart border can also be customized.
feature image
Chart Border Appearance
Series Border
Border customization options are also available for data points in a chart's data series.
feature image
Customized Series Border
Chart Font
Customized fonts can be rendered for all text appearing in a chart.
feature image
Chart with Custom Fonts
Chart Watermark
Watermark support has been added to show text, images, or both as watermarks inside the chart area.
feature image
Chart Watermark
Chart Series Skins
Skins have been added with nine built-in themes for a chart series, adding a new level of professionalism to charts. The following skins are available: pastel, nature, grayscale, earth tone, triad, default alpha, colorful, analog, and warm–cold.
feature image
Chart Series with Colorful Skin
feature image
Chart Series with Analog Skin
feature image
Chart Series with Grayscale Skin
feature image
Chart Series with Pastel Skin
Advanced X-Axis Features
There are numerous ways to customize the x-axis. Range Calculation: Allow the chart to determine the appropriate range for the given values or specify a custom range. Custom Intervals: Allows you to define the number of intervals or even the distance between the intervals whether you are plotting numeric or date-time values. Label Customization: Let the chart show the x values as labels, bind to some other property in the source, or even manually specify custom labels. Handling Intersecting Labels: Where there is not enough space to render label text, the chart will automatically lay it down in different modes.Multiple Rows: Sunday.....Tuesday......Thursday .........Monday.....WednesdayPartially Hide Labels: Sun....Mon...Tue...Wed...ThuOr choose to rotate the label text by 90 degrees.
Categorical Axis Support
Besides being able to plot numerical values (months of the year, etc.) in the x-axis, you can also plot categorical information like the names of people which are just plotted sequentially in the order in which they are encountered.
feature image
Category names as label names in X Axis
Axis Label Customization
Axis label text can be custom defined by setting the size, color, and font of the label text in the Chart control.
feature image
Customized Axis Label Text
Axis Label Orientation
The orientation of axis labels can be set to any specific angle. This is useful when label text is long and overlaps with the next label's text.
feature image
Rotated Axis Labels
Essential Chart can be configured to automatically change the orientation of axis labels to avoid overlapping by setting the ChartLabelIntersectionActionEffect property to Rotate.
feature image
Automatic Orientation of Axis Labels
Gridlines
Horizontal and vertical gridlines can be included in a chart area to bring clarity to its data points.
The appearance of gridlines can be customized as illustrated in the following image.
feature image
Chart Gridlines
Axis Line Type
The appearance of the x- and y-axis lines can be customized to fit your needs. The style, width, and color of these lines can be defined.
feature image
Chart Axis Lines
Axis Ticks
Essential Chart supports major and minor axis tick marks on the chart axes. The appearance of the tick mark can be customized by changing its color, height, and width. The number of minor axis tick marks between the major axis tick marks can also be specified.
feature image
Chart Axis Tick Marks
Opposed Axis
Essential Chart supports opposite chart axis positions. A chart's axis can be positioned opposite to that of its default position. This is useful in creating RTL charts or charts with negative values.
feature image
Chart with Opposed Axis
Inverted Axis
Any chart axis range can be reversed and the data for this axis will be plotted in the opposite direction. A chart with inverted axes is illustrated in the following image. The range has been rendered:
Top-to-bottom on the y-axisRight-to-left on x-axis
feature image
Chart with Inverted Axes
Docking and Alignment
Essential Chart allows users to dock the chart legend anywhere within the chart area.
feature image
Left-Docked Chart Legend
Legend Icon Style
Essential Chart provides a number of styles for the display of chart legend icons that represent the individual chart series.
feature image
Legend Icon—Circle
feature image
Legend Icon—Cross
feature image
Legend Icon—Diamond
feature image
Legend Icon—Hexagon
feature image
Legend Icon—Inverted Triangle
feature image
Legend Icon—Line
feature image
Legend Icon—Pentagon
feature image
Legend Icon—Rectangle
feature image
Legend Icon—Straight Line
feature image
Legend Icon—Triangle
Chart Export
Exporting a Chart to Several Formats
Essential Chart is capable of exporting a chart easily to any image file format. On top of that use our Reporting libraries to export into a Word document, PDF document, or an Excel worksheet.
feature image
Chart Exported to an Image File Format
Chart Zoom
Essential Chart features a zoom functionality that provides great flexibility by allowing users to zoom in on a chart by simply selecting a given area.
Once the image is magnified, scroll bars appear, allowing areas beyond the boundaries of the displayed area to be viewed. Optionally, you can hide these scroll bars and use the Zoom Out button to revert to the original image.
feature image
Zooming in on a Chart
Drill-down Support
Drill-down support allows detailed chart data to be called up from summary chart data for specific items. You can either drill down in place or update a details chart.
feature image
Drill-down Support
Scrolling and Panning
After zooming, scrolling and panning can be used to see all the visible areas of a chart. Scroll the chart area vertically by using the mouse wheel, and scroll horizontally by using the mouse wheel while pressing the SPACEBAR. To pan, you can click and drag the chart area to reveal hidden sections.
You can also scroll the chart area by using the arrow keys. Scrolling the chart area with the mouse wheel is achieved without any specific code on the controller and view sides. When the ZoomFactor property of any axis is less than one, then the panning operation is automatically enabled if the ZoomActions property is set to panning.
feature image
Scrolling and Panning
Interactive Cursor
The interactive cursor feature allows the mouse pointer to be placed on a specific data point in a series, creating horizontal and vertical lines that indicate the x and y values. These lines can be dragged in order to position them at specific data points.
The interactive cursor can be implemented by creating an instance of ChartInteractiveCursor with ChartSeries as its input. There are server-side and many client-side functions that improve the speed of the interactive cursor.
feature image
Interactive Cursor
Toolbars
Moveable toolbars have been added with various options, allowing you to save, copy, and print a chart in just a few clicks.
feature image
Chart Toolbar
feature image
Toolbar Structure
feature image
Customized Toolbar
Context Menu
Essential Chart for ASP.NET MVC now comes with context menu support. Context menus can be used to save a chart, print a chart, and more.
feature image
Chart Context Menu
ToolTip
Essential Chart supports ToolTips that can be used to retrieve x- and y-coordinate values for data at a particular point in a chart while also providing information about the data point.
feature image
Chart ToolTip
Client-Side Events
Plenty of client-side events like MouseDown, MouseUp, MouseMove, MouseClick, and MouseDoubleClick are available to help improve user interaction capabilities.
Chart Print
Essential Chart supports printing to any desired printer. With this feature, after zooming and scrolling, you can print the current visible range of the chart area by using the built in Printing capabilities of the Chart.
feature image
Precise Chart Printing
Skins Support
Essential Chart supports 14 different chart model skins which enhances the look and feel of a chart. It affects the BackInterior and ChartInterior properties.
By setting the ChartModelSkins property in MVCChartModel, you can change the skins applied to the Chart control. Color codes for series are matched to the ChartInterior and BackInterior properties. You can also specify SeriesColor and ForeColor.
feature image
14 Different Built in Skins
Series level Skins Support
There is also support for selecting the look and feel of the series points from a set of 9 different skins.
feature image
9 Skins for Series points.
::adCenter::