Column Chart - ngForOf e-series confusion

[Kobe Osei-Akoto]

Hey there!

For the most part the documentation on your site is pretty good!

I'm having trouble with what I'm sure is a common use case.

A developer wants to render a basic column chart and iterate over a series of objects in an array to render a chart that looks like this:

 

Once the chart is rendered, the legend should also be mapped to a specific color and also include say a data point like this [Legend Color] - [Data Name] - [Data Point]

How does one achieve this?

I tried to do a ngForOf to achieve my use case however it just rendered each series for each data point.

https://stackblitz.com/edit/column-chart-syncfusion-ngfor-series?file=app.component.html

[Srihari Muthukaruppan]

Hi Kobe, 

 

We have analyzed your query. From that, we suggest you to use fill property in the series to achieve legend color based on series. And also based on the code snippet provided each series has been rendered with 8 datasource and also used pointcolorMapping incorrectly. Hence based on your requirement we have modified the provided sample. Please find the sample and screenshot below. 

 

Sample: https://stackblitz.com/edit/column-chart-syncfusion-ngfor-series-okgjfe?file=app.component.html 

 

Screenshot: 

 

 

Let us know if you have any concerns. 

 

Regards, 

Srihari M 

[Kobe Osei-Akoto]

Hey Srihari,

Thanks for the recommendation with fill. 

Question 1:

How about if I want to map the data to actual points like I have in the example with this.chartData.  Currently in your example you are mapping all of the columns in the chart to 1 data point.

 

However in a suitable real world use case you would be working with a variety of objects in an array like so:

this.chartData = [{ country: 'USA', gold: 50, color: 'red' },

{ country: 'China', gold: 40, color: 'black' },

{ country: 'Japan', gold: 70, color: 'yellow' },

{ country: 'Australia', gold: 60, color: 'purple' },

{ country: 'France', gold: 50, color: 'orange' },

{ country: 'Germany', gold: 40, color: 'red' },

{ country: 'Italy', gold: 40, color: 'brown' },

{ country: 'Sweden', gold: 30, color: 'blue' }];

Question 2:

What if you want to show each of the data points (e.g.  e.g. USA has gold count of 50, China of 40) in the legend alongside color, and country name. 

I mocked up an example for you.

Feel free to let me know if I'm unclear with anything.

[Srihari Muthukaruppan]

Hi Kobe, 

 

Please find the response for chart related queries. 

 

Query #1: How about if I want to map the data to actual points like I have in the example with this.chartData. 

 

We have analyzed your query. From that, we would like to let you know that in chartData provided it consists of single array with 8 objects. Hence each series will be rendered as shown in the below screenshot.  

 

 

 

Even though if we use single data for each series chart will be rendered as shown In the below code snippet. There are no other possible ways to achieve your requirement through multiple series. Hence we suggested you to use single data to achieve your requirement. 

 

Sample: https://stackblitz.com/edit/column-chart-syncfusion-ngfor-series-8ydneq?file=app.component.ts  

 

  

Query #2: What if you want to show each of the data points (e.g.  e.g. USA has gold count of 50, China of 40) in the legend alongside color, and country name. 

 

We have analyzed your query. From that, we would like to let you know that we can achieve your requirement using legendRender event in the chart. Based on your requirement we have prepared a sample for your reference. Please find the sample and screenshot below. 

 

Sample: https://stackblitz.com/edit/column-chart-syncfusion-ngfor-series-8ydneq?file=app.component.ts 

 

Screenshot: 

 

 

Let us know if you have any concerns. 

 

Regards, 

Srihari M 

[Kobe Osei-Akoto]

Hey Srihari,

Thanks for the continued expedient replies!

I spent a good part of the morning trying to edit the width of each of the chart columns to stack against each other without any spacing in your modified Stackblitz.

I tried adjusting the following 3 properties as per your documentation.

https://ej2.syncfusion.com/angular/documentation/api/chart/seriesDirective/#columnspacing

https://ej2.syncfusion.com/angular/documentation/api/chart/seriesDirective/#columnwidth  

https://ej2.syncfusion.com/angular/documentation/api/chart/chartModel/#enablesidebysideplacement (already defaults to true)

If we can get each of the columns in the chart to render side by side without any space/margin in between them (as shown in my original example), I'm truthfully a satisfied customer/user.

Thanks,

Kobe

[Srihari Muthukaruppan]

Hi Kobe, 

 

We have analyzed your query. From that, we would like to let you know that as of now we don't have the support to achieve your requirement. We have considered this scenario as a feature and logged a feature request through which your requirement can be achieved. You can keep track of the feature from the feedback portal below. 

 

Feedback Link: https://www.syncfusion.com/feedback/22311/need-to-provide-legend-support-for-each-points 

    

The feature will be available in any of our releases. Please cast your vote to make it count. We will prioritize the features of every release based on the demands. We are closing this incident now. Please get back to us if you need further assistance.  

   

Regards,  

Srihari