Hi,
I am currently evaluating jquery based controls for use in my product, and have been very impressed with the chart capabilities of igChart. However, one serious gap I have is the ability to assign titles to various axes and the chart itself. The below post mentions that this feature didn't make it into the 2012v1 release, will this be addressed in 2012v2?
In the meantime, if you could you please provide an example of how to create axes and chart titles, based on the recommendations in the below post, I would very much appreciate it
http://es.infragistics.com/community/forums/t/70189.aspx
I also have achieved by using the CSS:
CSS styles
.chart-title{ text-align: center; color: Black; font-size: 1.4em;}
.chart-container{ margin: 2px auto;}
.yAxis-title
{ color: Black; float: left; width: 2%; margin-right: 1px; margin-left: 1px; margin-top: 65px; margin-bottom: 1px; padding-top: 1px; padding-bottom:1px; padding-left:1px; padding-right:1px; -ms-transform: rotate(-90deg); }
.yAxis-title-detailed{ color: Black; float: left; width: 2%; margin-right: 2px; margin-left: 1px; margin-top: 250px; margin-bottom: 1px; padding-top: 1px; padding-bottom:1px; padding-left:1px; padding-right:2px; -ms-transform: rotate(-90deg); }
.xAxis-title{ clear: both; text-align: center; color: Black;}
MVC3 Markup
<div class="chart-container"> <div class="chart-title"> </div> <div class="yAxis-title"> </div> <div class="chart-area"> @(Html.Infragistics().DataChart() .Height("150px") .Width("100%") .BottomMargin(10) .TopMargin(10) ...........................
.DataBind() .Render() ) </div> <div class="xAxis-title"> </div> </div>
Hope that helps.
Hi, Cheo
Axes titles and chart title are not supported directly by the control in the 2012.2 release either. This is because they can be easily achieved with very small amount of additional markup and styling, and I am going to show how you can do this. If you wish to have these feature included into the chart controls, please, enter a feature request so that the priority of these features is boosted.
Consider the following example:
The idea is to have two Divs with absolute positioning and put them in the correct coordinates so that they are located in the desired place near the corresponding axis. We define explicitly that the chart is 500px wide and high, and set rightMargin and topMargin so that there is enough space for the axis titles.
Chart title is even easier to achieve by using a Div or a Span and configure it to stay below or above the chart.
You can find attached a full HTML page with axis titles.
Cheers, Lazar