With the built-in zoom and scroll features of the Chart control, you can provide users with great flexibility. Users can simply click and drag an area of the chart to zoom in.
Once the image is magnified, scroll bars appear to let users view areas beyond the boundaries of the displayed image. Optionally, you can hide these scroll bars and use the Zoom Out button to let users revert to the original image view.
Zoomed Chart with Scroll Bars
Essential Chart for ASP.NET utilizes Essential XlsIO to read and import data from Microsoft Excel to Essential Chart.
Simple Excel data, containing values as illustrated in the following image, can be loaded using the Microsoft Jet OLEDB data provider.
Data Imported from MS Excel
Similarly, you can also export data from Essential Chart to Microsoft Excel.
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.
Simple Area Chart
A range area chart is a variation of a simple area chart that lets you plot bands of data on a chart, such as Bollinger bands and weather patterns. Each point on the chart is specified by two individual y values.
Range Area Chart
A spline area chart is an area chart with a smooth spline curve connecting the chart points.
Spline Area Chart
Stacked area charts are area charts with y-coordinate values stacked over one another in order by series.
Chart data can be viewed as a sum of series parts in this chart type.
Stacked Area Chart
Percent Stacked Area Chart
The percent stacked area chart displays stacked areas under different series curves as a percentage of the total stacked element.
Hence, the y-axis will always be displayed within the range "0–100". This chart type is best suited for depicting the relative contribution of data points.
Percent Stacked 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 forming a step-like progression.
Step Area 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.
Simple Bar Chart
Stacked bar charts are bar charts with y values stacked over one another in the series order. Chart data can be viewed as the sum of series parts when using the stacked bar chart.
Stacked Bar Chart
Stacked group charts allow users to group a series with another series using the group name in a stacking chart. This way the grouped series will be shown as a separate stacking.
Stacked Group Bar Chart
Percent Stacked Bar Chart
Percent stacked bar charts display stacked bars for different series as a percentage of the total stacked element. Hence, the x-axis will always be displayed with the range "0–100". This chart type is best suited for depicting the relative contribution of data points.
Percent Stacked Bar 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.
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 above mentioned bar is used to represent the progression of the task. Tasks may run in a sequential, parallel, or overlapped fashion.
Gantt 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, this chart has the capability to display a normal distribution curve.
Histogram Chart
A tornado chart is a bar chart which shows the variability of an output with respect to different inputs. Variability is displayed using relative lengths of bars across a range. Tornado charts are mainly used in sensitivity analysis and shows how different random factors can influence the prognostic outcome of a variable.
Tornado Chart
Column charts are the most commonly used charts, where the data points are displayed by vertical bars. They are similar to bar charts, except that the bars are vertical and not horizontal.
Used for comparing the frequency, count, total, or average of data in different categories. Ideal for showing the variations in the value of an item over time. Points from adjacent series are drawn as bars next to each other. Column charts can be drawn in three modes: default width mode, fixed width mode, and relative width mode.
Column Chart Drawn in Default Width Mode
Column Chart Drawn in Fixed Width Mode
Relative Width Mode—0.75 px
Error bars are supported to indicate the degree of uncertainty in plotted data through the use of a bar that indicates an "error range."
There are plenty of symbol options available to be rendered on the error bars.
Error Bars in a Column Chart
Data points from different series are rendered one over the other in a stacked column chart. They are very useful for indicating the cumulative effect of multiple series values.
Stacked Column Chart
Stacked group charts allow users to group a series with another series using the group name in a stacking chart. This way the grouped series will be shown as a separate stacking.
Stacked Group 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.
100% Stacked Column Chart
In a column range chart, there are two y-coordinate values in each data point, indicating the high and low of the data range as columns.
Column Range Chart
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 reveal trends at equal intervals.
3-D Line Chart
Error bars, which are used to indicate the level of uncertainty in plotted data points, are also available in line charts.
Error Bars in a Line Chart
A spline chart is a line chart with a smoothed line connecting the data points.
Spline Chart
Step line charts use horizontal and vertical lines to connect data points, resulting in a step-like progression.
Step Line 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.
Rotated Spline Chart
The following charts are commonly used to view financial data such as data involving stock prices.
The high and low values are represented by the wick of a candle in a candle chart.
The candle represents opening and closing values. The body of the candle is often colored based on the relationship between the opening value and the closing value.
Candle Chart Summarizing Stock Price for Each Day
A box-and-whisker chart represents data ranges as boxes, marks, or a combination of the two.
A solid "box" is drawn whose top and bottom edges correspond to the quartiles of a data set, and the mark inside it is the median value. The two "whiskers" attached to the ends of a box represent the overall range of the data. Comparing several box-and-whisker chart series helps in spotting distribution differences.
Box-and-Whisker Chart
Box-and-Whisker Chart with Percentiles
The Chart control supports specifying the values for whiskers as percentages. The ends of the whiskers are specified by the value of the Series1.ConfigItems.BoxAndWhiskerItem.Percentile property.
Box-and-Whisker Chart with Percentiles
As the name suggests, high-low charts are used to view the high and low values of a stock during a day.
High-Low Chart Depicting Stock Price Summary
This chart type indicates the high, low, open, and close values of a stock during a day.
This helps view the range in which a stock is traded during the day along with opening and closing values.
High-Low Open and Close Values Chart
A Kagi chart consists of a series of vertical lines connected by short horizontal lines. The thickness and direction of the vertical lines depends on a stock's price.
This chart is ideal for clearly illustrating price movement; that is why it is one of the many charts that investors use to make informed decisions about stocks.
The thick lines indicate that demand exceeds supply, and thin lines indicate supply exceeds demand. As long as prices continue to move in the same direction, the vertical line keeps growing. If there is a reversal in price values that exceeds a specified "reversal amount," a new Kagi line is drawn in a new column. When the line color is orange, it indicates "demand exceeds supply", and the market is trending up. When line is blue, it indicates "supply exceeds demand", and the market is trending down. The higher the bars go, the stronger the trend.
Kagi Chart
Point and figure charts are used to identify support levels, resistance levels and chart patterns.
This chart ignores time as a variable and concentrates solely on movement in price. A column of Xs or Os may take one day or several weeks to complete. By convention, the first X in a column is plotted one box above the last O in the previous column.The first O in a column is plotted one box below the highest X. The Xs represent an upward trend and the Os represent a downward trend.
Point and Figure Chart
Renko charts are excellent in projecting support and resistance levels.
Bricks of equal size are drawn to represent a specified value. A brick is drawn in the direction of the prior price move, but only if the price moves by a minimum amount. If prices change by a predetermined amount or more, a new brick is drawn. If prices change by less than the determined amount, the new price is ignored.
Renko Chart
A three line break chart is similar to a point and figure chart with the following additional features.
Displays a series of vertical boxes ("lines") that are based on changes in prices. Ignores time as a factor. Depicts rising and falling lines of varying heights. Each new line occupies a new column. Using closing prices (or highs and lows), a new rising line is drawn if the previous high is exceeded, and a new falling line is drawn if the closing price is less than the previous low.
Three Line Break Chart
Stock and volume charts can be created using a line chart for stock price (or a high-low chart as shown below), and a column chart for volume data.
The multiple axes support aids in the creation of such charts.
Stock and Volume Chart
In the previous chart, the moving average for the stock chart is calculated over a period of three days.
A pie chart is ideal for displaying percentages in a fractional format of proportionate values.
Plots y-coordinate 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.
Pie Chart
A doughnut chart is a pie chart with a vacant center. The size of the data in the doughnut chart corresponds to the doughnut coefficient, which determines the relation of the inner and outer radii.
This chart is best suited for presenting data in proportions.
Doughnut Chart Displaying Proportionate Data
A bubble chart is an extension of the scatter chart, with each data point represented by a circular bubble and the area of the bubble rendered in proportion to the value of a third variable.
It is commonly used to represent financial data.
Bubble Chart
A simple plot of x and y values along two axes can be created using scatter charts.
Data points are not joined together.Data points can be highlighted using built-in shapes or custom images.Numerical data, both discrete and continuous, can be displayed.Generally used to plot scientific data.
Scatter Chart
Connected scatter charts are a plot of x- and y-coordinate values along two axes where the points are connected using lines or splines.
The points can be customized using shapes or images to make them easily identifiable.
Connected Scatter Line Chart
Connected Scatter Spline Chart
Accumulation charts are typically single-series charts that represent data in percentages and do not utilize axes.
A funnel chart is a type of accumulation chart in which the height of the funnel segment corresponds to the y 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 value can also be made to correspond to the width of the segment.
Funnel Chart—Circular Base
3-D Funnel Chart—Square Base
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 value of the corresponding point.
Note that the base of the pyramid can be square or circular.
Pyramid Chart—Circular Base
3-D Pyramid Chart—Square Base
A polar chart is a circular graph where data is displayed in terms of values and angles.
Provides the option to perform a visual comparison between several quantitative or qualitative aspects of a situation. 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 the data point is used to set the angle. The y-coordinate value defines the distance from the center of the graph.
Polar Chart
A radar chart is a clock-face form of a line chart.
Compares the aggregate values of the 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.
Radar Chart
Inversed Polar and Radar Chart
Essential Chart supports inversed radar and polar charts. This feature is used to render the polar and radar charts in a clockwise direction.
Inversed Polar Chart
Inversed Radar Chart
Essential Chart supports 3-D mode for all chart types except polar and radar.
3-D Stacked Bar Chart
The depth of the z-axis can be customized using the Depth property.
3–D Column 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 through code.
Stacked Chart in 3-D Real Mode
Spacing Between Data Series
Spacing helps customize the space between columns to give the chart an uncluttered look.
Increased spacing between columns automatically reduces the column widths of a column.
No Space Between Data Series
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.
Spacing Between Data Series—3-D Mode
Default color palettes are applied on chart data points unless custom colors are specified for the data series.
These built-in palettes offer a rich set of colors to render professional-looking charts.
Chart with Default Color Palette
Essential Chart also lets you define and add custom color palettes.
Chart with Custom Non-Gradient Color Palette
Symbols can be associated with each data series to highlight its data points.
Customization options are available for symbol size and color.
Chart with Data Point Symbols—Star and Triangle
There is also an option to specify custom symbols in place of the built-in symbols.
Chart with Custom Data Point Symbols
The Chart control has an automatic range scaling engine that can compute the best possible range for a given set of values.
Automatic range calculations are also configurable. You can configure a range to start with "0" and also set the preferred number of intervals.
Automatic ranges can also be calculated for date values. The range intervals are calculated to be in increments of easily understandable date segments, such as weeks, months, years, and so on.
Essential Chart lets you specify a custom range and its scale for an axis if the automatically calculated range scale is undesirable.
You can manually set the range as well as the intervals for an axis.
In the following image, a custom x-axis range with a minimum value of "0", a maximum value of "6", an interval of "1", and a custom y-axis range with a minimum value of "-100", a maximum value of "600", and an interval of "100" is illustrated.
Customized Axis Range and Scale
A polar chart is a circular graph in which data is displayed in terms of values and angles. Essential Chart lets you specify any custom range, instead of 0–360 degree range values for the axes of the polar chart.
You can set the range as well as intervals for an axis.
A custom polar axis range with a minimum value of "0", a maximum value of "12", and an interval of "1" has been illustrated in the following image.
Polar Chart with Customized Axis Range
Essential Chart supports multiple axes. You can add a secondary axis and position it next to or below the primary axis.
These options are illustrated in the following images.
Stacking Layout
Side-by-Side Layout
You can also position this secondary axis opposite the primary axis as illustrated in the following image.
Chart with Multiple Y-Axes
The Chart control supports displaying ellipses at the end of axis titles when the title text exceeds the axis boundaries.
This feature can be implemented in both primary and secondary axes.
Chart Axes Titles that Extend beyond Axes Ranges
Scale breaks help in accommodating outlying data into the display while also clearly displaying normal values.
Scale breaks can be applied automatically or manually.
Chart without Scale Break
Inserted Code for Manual Scale Break
Chart with Manually Inserted Scale Break
Inserted Code for Automatic Scale Break
Chart with Automatically Inserted Scale Break
Essential Chart allows users to dock a data legend anywhere within the chart area.
Docked Data Legends—Left, Top, and Bottom
The data legend can also be aligned near, center, or far on the docked side.
Aligned Data Legends—Near, Center, and Far
The chart legend can also be set to float so that the user can drag the legend at run time.
Chart Legend in Float State
Essential Chart provides a number of representation types for the data legend.
Representation Type—Circle
Representation Type—Cross
Representation Type—Diamond
Representation Type—Hexagon
Representation Type—Triangle
Representation Type—Line
Representation Type—Pentagon
Representation Type—Rectangle
Representation Type—Straight Line
Representation Type—Triangle
Representation Type—Series Image
