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
145
igx-category-chart legend and igx-doughnut-chart
posted

Hi,

1. I am using igx-category-chart, I want to add legend to it but I am not able to get that correct value. Can you give me the solution for it?

Following is the code I am using-

this.dataColumn = [
{ 'Item': 'Yearly Quota', 'Value': parseInt(200000) },
{ 'Item': 'Quota Used', 'Value': parseInt(456789) }
];

<div class="col-lg-12 col-sm-12 col-xs-12 row" style="margin-top: 5px; margin-bottom: 30px; ">

<div class="col-lg-6 col-sm-12 col-xs-12 chart" style="border: 1px solid #ccc;padding: 15px;background: #fff;">
<igx-category-chart height="360px" width="100%"
chartType="Column"
thickness="2"
xAxisTickLength="10"
xAxisTickStrokeThickness="2"
xAxisTickStroke="gray"
yAxisTickLength="0"
yAxisMinimumValue="0"
(seriesAdded)="onSeriesAdded($event.sender, $event.args)"
[tooltipTemplate]="valueGraphTooltip"
isTransitionInEnabled="true"
transitionInDuration="500"
transitionInMode="AccordionFromBottom"
xAxisGap="1"
[dataSource]="dataColumn"
[legend]="legend">
</igx-category-chart>
</div>
<div class="col-lg-2 col-sm-2 col-xs-2" style="border-left: 1px solid #ccc; border-bottom: 1px solid #ccc; height: 380px;">
<igx-item-legend #legend orientation="horizontal"></igx-item-legend>
</div>
</div>

Please let me know the changes required.

2. I am also using igx-doughnut-chart, just wanted to know that can we add count to the legend? If yes then how to add that count to igx-doughnut-chart legend. Please let me know.

Thanks in Advance!

Parents
  • 34810
    Offline posted

    Hello Vaishnavi,

    I have been investigating into the behavior you are looking to achieve, and it just so happens that I already had a sample project that demonstrates usages of legends with both the IgxCategoryChart and the IgxDoughnutChart. I am attaching this sample with a couple of modifications.

    The IgxDoughnutChart must use an <igx-item-legend>, but I see you are currently trying to use this same type of legend with the igx-category-chart, which will not work. The IgxCategoryChartComponent requires you to use an <igx-legend> instead. The <igx-item-legend> is meant specifically for the Pie and Doughnut charts.

    Regarding adding a count to the legend for the IgxDoughnutChart, the IgxRingSeries exposes a “legendLabelMemberPath” property, and so if you have a property path on your data item that includes the value or count, you can set this property to that in order to get the count in the legend.

    I am attaching a sample project to demonstrate the above. I hope this helps you.

    Please let me know if you have any other questions or concerns on this matter.

    CategoryDonutDemo.zip

Reply Children