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
60
igDataChart Legend Horizontal
posted

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())

  • 49378
    posted

    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.

     

    HorizontalLegend.zip