RadHtmlChart began as a rather simple ASP.NET AJAX charting control with a lot of promises and expectations to fulfill. I do believe it has done a marvelous job so far and this is one of the reasons why I wanted to match its feature set to the one of the older and more mature charting control the RadControls for ASP.NET AJAX suite offers – RadChart. The other reason is that the previous comparison is, obviously, hopelessly outdated :). Right below you will find several tables that compare the main areas of the two charting controls – main concepts, different chart types, axis configuration and more.
I decided to have the available chart types in a separate section, because most of the features below will apply to any of them. Also, because a short text introduction may help rest your eyes for all the tabular data. Hey, I didn’t say it was going to be short; we have been working really hard this past year to deliver all this functionality :)
Chart type | RadHtmlChart | RadChart |
Area | yes | yes |
Bar | yes | yes |
Bubble | yes | yes |
Candlestick | yes | yes |
Column | yes | yes |
Donut | yes | no |
Line | yes | yes |
Pie | yes | yes |
Point (scatter) | yes | yes |
Scatter line | yes | yes |
Stacked bar | yes | yes |
Stacked column | yes | yes |
Bezier | no | yes |
Gannt | no | yes |
Spline | no | yes |
Spline area | no | yes |
Stacked area | no | yes |
Stacked area 100% | no | yes |
Stacked bar 100% | no | yes |
Stacked column 100% | no | yes |
Stacked spline area 100% | no | yes |
Let’s get down to business. Scroll down and examine the tables I prepared for you. If the short explanations in the first column are not sufficient – most of the rows have links to back my words up in the second and third column. Dig in!
General | RadHtmlChart | RadChart |
uses latest web standards (SVG, CSS, JS) | yes | no |
intuitive markup structure | yes | no |
consistent skins with the rest of the suite | yes | no |
rendering animations | yes | no |
hover effects and interactive animations | yes | no |
toggle series visibility when clicking on the legend | yes | can be done |
client-side click events | yes | can be done |
server-side click events | no | yes |
client-side rendering | yes | no |
client-side databinding | yes | no |
databinding to various server datasources | yes | yes |
* If you are wondering what “can be done” means – some additional code needs to be written in order to get the given effect/functionality
Main Features | RadHtmlChart | RadChart |
negative values support | yes | yes |
empty values support | yes | yes |
sparkline charts* | October 2013 | can be done |
visual designer | yes | yes |
zooming | no | yes |
scrolling | no | yes |
drilldown | can be done | can be done |
automatic layout adjustment | yes | yes |
export | can be done | yes |
marked zones | no | yes |
grouping for stacked series | October 2013 | no |
built-in data grouping** | no | yes |
exploding pie series items | yes | yes |
* sparkline charts are more like a set of configurations for the chart – no axes or labels, smaller size. RadHtmlChart will make them for you with just one property
** I would advise grouping the datasource itself anyway, before passing it to the chart
Appearance and styling | RadHtmlChart | RadChart |
detailed customization of the elements positions | no* | yes |
detailed customization of the elements appearance | yes | yes |
adjust color for an individual item | yes | yes**** |
modify pen styles | yes** | yes |
line series markers can be modified | yes | yes |
control over bars width and overlap | no | yes |
modify the legend items | yes*** | yes |
custom background images | can be done | yes |
formatting numbers in labels | yes | yes |
formatting numbers in tooltips | yes | can be done |
* positions can be chosen (e.g. bottom, left, right, top), but exact numbers like left=20px cannot be used
** for line series – line width and color, the line type cannot be changed (e.g. to dots, dashes)
*** only their appearance, the legend contents are generated from the series collection
**** only for bar series
Labels and tooltips | RadHtmlChart | RadChart |
tooltips per item | yes* | can be done |
automatic text wrapping | no | yes |
multiline labels** | no | yes |
intelligent labels that avoid overlap | no | yes |
* for a databound RadHtmlChart the powerful ClientTemplates can be used
** there simply is no such thing as a line break in SVG text elements
Axis related | RadHtmlChart | RadChart |
multiple y-axes | yes | yes* |
datetime support | yes | yes** |
scale breaks | no | yes |
logarithmic axis | no | yes*** |
reversed axes | yes | can be done |
control over the axis labels position according to the tick | no | yes |
axis labels step | yes | yes |
the first axis labels can be skipped | yes | no |
* only one
** limited, requires custom code
*** only the y-axis
Accessibility and Internationalization | RadHtmlChart | RadChart |
render the chart data as table | can be done | yes |
localization | can be done | yes |
Go through the following post from my colleague Stamo on the change in the way series items are created in RadHtmlChart programmatically, in case you missed it. A lot of work has been put into this control to help our new recruit measure up with the veterans.
You may have spotted a couple of rows read “October 2013” for RadHtmlChart. This comes to say that these features are nearly complete and they will definitely make it in the next major release.
If you want to see something else implemented – drop us a line below or post in our Feedback Portal.
Don’t forget to play around with the RadHtmlChart online demos and go through its online documentation, because there is a lot more information there than I can possibly squeeze into this post.
Marin Bratanov was a Principal Technical Support Engineer in the Blazor division.