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!
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
Thank you for the solution. Getting some issue-
1. I want to add count as well as Label to the IgxDoughnutChart legend. If I use legendLabelMemberPath then it is only giving me the count. I want Label & Count both in the legend. Follwing is the changing I did -
<igx-doughnut-chart height="360px" width="100%"> <igx-ring-series [dataSource]="dataPieFinal" labelMemberPath="Label" legendLabelMemberPath="Value" valueMemberPath="Value" othersCategoryThreshold="0" labelsPosition="outsideEnd" [brushes]="brushes" [legend]="legendPie" [tooltipTemplate]="valueTooltip"> </igx-ring-series> </igx-doughnut-chart>
I want to display label & velue both in legend.2. In IgxCategoryChart, I am not getting the correct legend. Following is the code changes I did :-
<div> <igx-legend #legend orientation="horizontal"></igx-legend> </div>
<igx-category-chart height="360px" width="100%" chartType="column" [dataSource]="dataColumn" thickness="2" xAxisTickLength="10" labelMemberPath="Item" valueMemberPath="Value" xAxisTickStrokeThickness="2" xAxisTickStroke="gray" yAxisTickLength="0" yAxisMinimumValue="0" (seriesAdded)="onSeriesAdded($event.sender, $event.args)" [tooltipTemplate]="valueGraphTooltip" isTransitionInEnabled="true" transitionInDuration="500" transitionInMode="AccordionFromBottom" xAxisGap="1" [legend]="legend"> </igx-category-chart>
Please let me know the changes.
Thank you in Advance!