Forums Ignite UI for jQuery
Your Privacy Matters: We use our own and third-party cookies to improve your experience on our website. By continuing to use the website we understand that you accept their use. Cookie Policy
Close
Cheo Alvarez
80
Lack of Support for Titles on Axis and Chart
posted

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://ko.infragistics.com/community/forums/t/70189.aspx

Parents
No Data
Reply
  • 1775
    Suggested Answer
    posted

    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:

    1. $("#chart").igDataChart({
    2.     width: "500px",
    3.     height: "500px",
    4.     topMargin: 30,
    5.     rightMargin: 40,
    6.     ...
    7. });
    8.  
    9. ...
    10. <style>
    11.     #yAxisTitle { position: absolute; top: 10px; left: 25px; }
    12.     #xAxisTitle { position: absolute; top: 470px; left: 480px; }
    13. </style>
    14.  
    15. <div id="xTitle" class="axisTitle">Price</div>
    16. <div id="yTitle" class="axisTitle">Date</div>

    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 

    Chart_Axes_Titles.zip
Children