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!
Thank you for your update on this matter. I will answer your new questions below.
1. You are correct to be setting the LegendLabelMemberPath in this case, but if you set it to “Value” in this case, which appears to be the same member path as your ValueMemberPath, and so it is expected that you are only seeing the value in the legend. If you want both of these to be shown, you will need to define a member path on your underlying data item that concatenates these two and set that to the LegendLabelMemberPath.
In the sample project I attached above, I demonstrate this by defining the “LegendLabel” property on the underlying data item in the donut-chart-page.component.ts file. I would recommend you take a look.
2. Would it be possible for you to please elaborate a bit further on what you mean by “not getting the correct legend?” What do you mean by the “correct” legend in this case? What is incorrect about the legend that you are currently seeing?
Thank you for your solution. I achieved my requirement.