Hi,
I am using the Ignite UI with the legend. How do I get the legend to show Horizontal instead of Vertical?
Right now it is doing this.
A - Something
B - SOmething
C - SOmething
I want it to go
A - Something B - SOmething C - something
Any way to do this? tips, trick, work around?
<style> #igInitiativeFinancialForcastChart { position: relative; float: left; margin-right: 0px; margin-bottom: 10px; margin-top: 10px; margin-left: 0px; border: 0px; padding: 0px; border-color: white; display: inline-block; }
#legend { position: relative; float: left; width: 100%; margin-right: 0px; margin-bottom: 10px; margin-top: 10px; margin-left: 0px; border: 0px; padding: 0px; border-color: white; display: inline-block; } </style>
@*Infragistic Loader, load IgDataChart *@ @(Html.Infragistics().Loader() //.ScriptPath(Url.Content("~/Scripts/IG/JS/")) //.CssPath(Url.Content("~/Content/IG/css/")) .Resources("igShared, igGrid") .Render())
@*Infragistic igDataChart Render*@
@(Html.Infragistics().DataChart(sortedModel.AsQueryable()) .ID("igInitiativeFinancialForcastChart") .Width("100%") .Height("300px") .Legend(legend => legend.ID("legend")) .Axes(axes => { axes.CategoryX("xAxis").Label(item => item.FiscalYear).LabelVisibility(Visibility.Visible); axes.NumericY("yAxis"); } ) .Series(series => { series.Line("internallabor").Title("I").XAxis("xAxis").YAxis("yAxis").ValueMemberPath(item => item.InternalLabor).Thickness(5).ShowTooltip(true).TooltipTemplate("internalTooltip"); series.Line("externallabor").Title("E").XAxis("xAxis").YAxis("yAxis").ValueMemberPath(item => item.ExternalLabor).Thickness(5).ShowTooltip(true).TooltipTemplate("externallaborTooltip"); series.Line("capitalexpenditure").Title("C").XAxis("xAxis").YAxis("yAxis").ValueMemberPath(item => item.CapitalExpenditure).Thickness(5).ShowTooltip(true).TooltipTemplate("capitalexpenditureTooltip"); series.Line("initialestimate").Title("EST").XAxis("xAxis").YAxis("yAxis").ValueMemberPath(item => item.InitialEstimate).Thickness(5).ShowTooltip(false).TooltipTemplate("initialestimateTooltip"); series.Line("currentrevisedestimate").Title("REV").XAxis("xAxis").YAxis("yAxis").ValueMemberPath(item => item.CurrentRevisedEstimate).Thickness(5).ShowTooltip(false).TooltipTemplate("currentrevisedestimateTooltip"); series.Line("total").Title("T").XAxis("xAxis").YAxis("yAxis").ValueMemberPath(item => item.Total).Thickness(5).ShowTooltip(false).TooltipTemplate("totalTooltip");
} ) .DataBind() .Render())
Hi Kevin,
Thank you for posting in the community.
igDataChart's legend is rendered inside an html table (which is created inside the target legend element). Each item in the legend is therefore placed in a row of that HTML table.
In order to display the legend in a horizontal manner, I would suggest applyingdisplay:inline-blockto each of the table rows. That can be achieved by defining a separate CSS class for the TR elements as such:
#legend tr { display: inline-block; }
I am attaching a small sample page showing this in practice.
Hope this helps. Please do not hesitate to contact me if you have any questions.