Live Chat Icon For mobile
Live Chat Icon
Popular Categories.NET  (158).NET Core  (28).NET MAUI  (44)Angular  (65)ASP.NET  (50)ASP.NET Core  (77)ASP.NET MVC  (88)Azure  (32)Blazor  (141)DocIO  (23)Essential JS 2  (80)Essential Studio  (171)File Formats  (26)Flutter  (121)JavaScript  (170)Microsoft  (112)PDF  (65)React  (51)Succinctly series  (126)Syncfusion  (570)TypeScript  (30)Uno Platform  (3)UWP  (4)Vue  (35)Webinar  (30)Windows Forms  (58)WinUI  (43)WPF  (134)Xamarin  (149)XlsIO  (25)Other CategoriesBarcode  (5)BI  (29)Bold BI  (4)Build conference  (6)Business intelligence  (53)Button  (4)C#  (117)Chart  (56)Cloud  (11)Company  (445)Dashboard  (7)Data Science  (3)Data Validation  (6)DataGrid  (54)Development  (351)Doc  (7)DockingManager  (1)eBook  (95)Enterprise  (22)Entity Framework  (5)Essential Tools  (14)Excel  (23)Extensions  (17)File Manager  (4)Gantt  (11)Gauge  (9)Git  (4)Grid  (27)HTML  (9)Installer  (2)Knockout  (2)Language  (1)LINQPad  (1)Linux  (2)M-Commerce  (1)Metro Studio  (11)Mobile  (289)Mobile MVC  (9)OLAP server  (1)Open source  (1)Orubase  (12)Partners  (21)PDF viewer  (29)Performance  (9)PHP  (1)PivotGrid  (4)Predictive Analytics  (6)Report Server  (3)Reporting  (10)Reporting / Back Office  (11)Rich Text Editor  (7)Road Map  (10)Scheduler  (36)SfDataGrid  (9)Silverlight  (21)Sneak Peek  (21)Solution Services  (2)Spreadsheet  (11)SQL  (8)Stock Chart  (1)Surface  (4)Tablets  (5)Theme  (11)Tips and Tricks  (89)UI  (200)Uncategorized  (68)Unix  (2)User interface  (68)Visual State Manager  (1)Visual Studio  (23)Visual Studio Code  (14)Web  (323)What's new  (192)Windows 8  (19)Windows App  (2)Windows Phone  (15)Windows Phone 7  (9)WinRT  (26)
Share on twitter
Share on facebook
Share on linkedin

What’s New in JavaScript Chart Control for Volume 1, 2015

Our Volume 1, 2015 release introduced a lot of new features for our JavaScript Chart control. Some major highlights were the additions of 100% stacked series, annotations, and trimming for axis titles and labels.

Stacked series

The 100% stacked series gathers the values of all series and stacks them so they account for 100% of something being measured. Chart types include 2-dimensional stacked area, 2- and 3-dimensional stacked column, and 2- and 3-dimensional stacked bar.


2-D 100% Stacked Area



2-D 100% Stacked Column



3-D 100% Stacked Column



2-D 100% Stacked Bar



3-D 100% Stacked Bar


The annotation functionality allows you to modify charts by placing custom elements at desired positions. Consider the need to watermark a chart; this can now be accomplished through annotations.


Chart Annotation Used as a Watermark


Not only can you add text, but you can also add any HTML element (images, text, controls, etc.) that needs to be displayed over a chart. In the following image, you can see we have annotated the chart with highest and lowest temperatures for the year 2014.


Temperature Annotations


The annotations functionality is very flexible. The following examples showcase this.


Annotation at Center of Doughnut Chart Showing Sum of Segments



Pie Chart as an Annotation inside Another Chart



Series Color Picker as an Annotation in a Chart


Trimming titles and labels

The trimming functionality makes an axis title trim itself when its text length goes beyond the axis.
A tooltip with the full axis title will be displayed when the cursor hovers over the trimmed title.


Tooltip Containing Full Title


Our chart already supports axis label trimming by showing the full label in a tooltip when the cursor hovers over labels that intersect each other. Now we have extended the support to cases in which labels don’t intersect. All you have to do is to enable axis label trimming and set a width for the label to display on the axis.


Tooltip Containing Full Label


For other JavaScript updates included in Volume 1, be sure to look at our What’s New section.

Content Editor: Usha Clementine Henry | Content Contributor: Michael Prabhu Manoharan


Share this post:

Share on twitter
Share on facebook
Share on linkedin
Popular Now

Be the first to get updates

Subscribe RSS feed
Scroll To Top