igx-data-chart Line-series chart

Hi,I am trying to use dynamic line-series chart in my project. How can I use dynamic data to plot line graph? Based on the data the lines should be plotted in the graph, we don’t know how many line will be there exactly so I want to make it dynamic.

I tried with the following example:-

https://stackblitz.com/github/IgniteUI/igniteui-live-editing-samples/tree/master/angular-demos-dv/charts/category-chart-line-chart-multiple-sources?file=src%2Fapp%2Fline-chart-multiple-sources%2Fcategory-chart-line-chart-multiple-sources.component.html

But this is only showing the legend and not plotting lines. Is it because of version?

I am using angular 9 and igniteUI 9 version.

Following is the data I want to display & also sent you the screenshot how it should plot:-

{dateMonth: “Dec”, dateYear: 2020, salesValue: 96.96}

{dateMonth: “Nov”, dateYear: 2020, salesValue: 81.75}

{dateMonth: “Oct”, dateYear: 2020, salesValue: 27.06}

{dateMonth: “Apr”, dateYear: 2021, salesValue: 135}

{dateMonth: “Jun”, dateYear: 2021, salesValue: 98}

Please let me know how can I achieve the above requirement.

Thanks in Advance!

Hello Vai,

I am attaching a sample project that demonstrates the type of chart that you are looking to achieve with the IgxCategoryChartComponent. Please note that the data source you have provided will not result in that type of chart, as there is only a single value-path with that data source. As such, it would only result in a single line being plotted, as each line needs its own value path.

I have also confirmed that this is should not be due to the version you are targeting, as the sample project I am sending you is built against Angular 9 and version 9 of the igniteui-angular-charts npm packages. Perhaps you are missing a referenced module in your application?

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

Attachments:

1. 1460.demo_.zip

Hi Andrew,

Thank you for the solution, it worked for me. 

Now I want to add the labels to the lines. Meaning the values should be shown as a label to the line chart. Can you please help me with the solution?

Thanks!

Hello Vai,

There are a couple of options to show the values as labels on your line chart in the IgxCategoryChartComponent. I will list them below:

1. The first thing I would recommend is to utilize the Callout Layer to show your data values. The Callout Layer works as an annotation for each data point of your series. You can read more about the Callout Layer, along with a sample project, here: https://pt-br.infragistics.com/products/ignite-ui-angular/angular/components/charts/features/chart-annotations#angular-callout-layer.

2. My alternative recommendation in this case is to write a template for the markers. This is a bit more complicated than the Callout Layer in my opinion, but it gives you full control over what the markers look like. You can read about templating markers in the IgxCategoryChart here: https://pt-br.infragistics.com/products/ignite-ui-angular/angular/components/charts/features/chart-markers#angular-chart-marker-templates.

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

Hi Andrew,

I am using data as the following:-

this.data = [
{ dateMonth: “Dec”, value2019: 110, value2020: 55, value2021: 80 },
{ dateMonth: “Nov”, value2019: 5, value2020: 15, value2021: 55 },
{ dateMonth: “Oct”, value2019: 70, value2020: 10, value2021: 120 },
{ dateMonth: “Apr”, value2019: 10, value2020: 15, value2021: 5 },
]; 

In your 1st option we have to add valueMemberPath, how can I add it for the above data? Can you please tell me.

Also I just wanted to know, is there any simple method to add a data label just like using some properties?

Please let me know the solution.

Thanks in Advance!

Hello Vai,

With the IgxCategoryChart, I would recommend utilizing a separate data source that you can apply to the calloutsDataSource property of the chart. You can populate that data source like so:

for(let i=0; i<this.data.length; i++){       this.calloutData.push({ index: i, value: this.data[i].value2019});       this.calloutData.push({ index: i, value: this.data[i].value2020});       this.calloutData.push({ index: i, value: this.data[i].value2021}); }

In this case, the “index” would be assigned to the calloutsXMemberPath and the “value” would be assigned to the calloutsYMemberPath and calloutsLabelMemberPath. The index in this case is the index of the “category” item that you are binding, or the index of the corresponding data item in the bound data source of the IgxCategoryChart.

This is the simplest way to add data labels. There currently does not exist a simpler way, unless you consider the marker template mentioned above simpler than the CalloutLayer.

I am attaching a modified version of the sample project I attached previously to demonstrate the above.

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

Attachments:

1. 7827.demo_.zip

Hi Andrew,

Thank you so much for the solution, it worked for me. 

Now, I just wanted to know is there any way to display the data value vertically on the bar graph? If yes, then how can we do that? Please let me know.

Thank you in Advance!

Hello Vai,

There currently does not exist a way to show the values of the column vertically in the IgxCategoryChart using the callout layer, as there is no “orientation” property of the callouts. If you would like to see this potentially implemented in a future version of the control, I would recommend suggesting a new product idea for it at our Angular Ideas Site, here. This will place you in direct communication with our product management teams who plan and prioritize upcoming features and development based on community and user feedback.

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

Ok, Thank you.

Just a last question. Just wanted to know Is there any way to add dynamic value to the X-axis title?

I am using :- xAxisTitle="Year"

Instead of Year if I give dynamic variable then it is taking as text only. Please let me know if it possible.

Thank you in Advance! 

Hello Vai,

I am under the impression in this case that your dynamic variable/property is named “Year” in this case, and it is containing the value that you are looking to place on the xAxisTitle. If this is the case, you need to set the property like so:

[xAxisTitle]=”Year”

The brackets [ ] designate that you are trying to bind the property, whereas just setting it outright will take that string.

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