Hello,
I am using Infragistics().DataChart in my application.
Currently the chart is displaying gridlines both horizontally and vertically.
But I need to remove horizontal grid lines and also need to customize "NumericY" Label format.
i.e. "$" dollar format before values in Numeric y axis.
Also need to display series tool tip values dynamically.
So please provide me solution and also send me sufficient examples regarding "Html.Infragistics().DataChart"
My code is given below.
@(Html.Infragistics().DataChart(Model.DisbursedFunds.AsQueryable()) .ID("chart") .Width("900px") .Height("550px") //.GridMode(GridMode.None) .Axes(axis => { axis.CategoryX("MonthName").Label(item => item.MonthName).LabelLocation(AxisLabelsLocation.OutsideBottom).Interval(1).LabelLocation(AxisLabelsLocation.OutsideBottom).MinorStrokeThickness(1); axis.NumericY("TotalSum").MinimumValue(0).MaximumValue(5000000).LabelLocation(AxisLabelsLocation.OutsideLeft); axis.NumericY("TotalLoans").MinimumValue(0).MaximumValue(100).StrokeThickness(10).LabelLocation(AxisLabelsLocation.OutsideRight); } ) .Series(series => { series.Column("Sum").Title("New Loans").Brush("#87AB3D").ShowTooltip(true).TooltipTemplate("Sum") .XAxis("MonthName").YAxis("TotalSum").ValueMemberPath(item => item.Sum) .Legend(legend => legend.ID("legend")).ShowTooltip(true).TooltipTemplate("Total Loans funded").ShowTooltip(true); series.Spline("total").Title("Number of Loans") .XAxis("MonthName").YAxis("TotalLoans").Thickness(3).ValueMemberPath(item => item.Total) .Legend(legend => legend.ID("legend2")).ShowTooltip(true).TooltipTemplate("Number of Loans"); } ) .DataBind() .Render())
Thanks
Here is a way to set a label format in the axis definition. you can use any javascript steps to set the format. 'item' appears to be the numeric value to be formated:
{ type:'numericY',
name:'yAxis2',
labelLocation:"outsideRight",
labelVisibility:'visible',
formatLabel:function (item) {
return formatItemLabel(item, 4, 6) + '(ma)';
},
Hello all,
Thank you for providing your solutions, jspooner_mso! These are both great answers and will get the job done.
The TooltipTemplate can be a script HTML element with type=”text/x-jquery-tmpl” or a string passed to the series object’s tooltipTemplate option. The igTemplating engine renders the template and the syntax follows the jQuery templating syntax. For more details please refer to the Templating Engine Overview topic:
https://www.igniteui.com/help/igtemplating-overview
You can also see an example of our tooltip templates here:
https://www.igniteui.com/data-chart/overview
I have attached my MVC sample with these three solutions implemented. You can find it below. If you have any further questions or concerns, please let me know.
Hi shahinkohan,
Please let me know if you need further assistance with this issue.