How to edit Column stack and make single column for multiple column

Question

Hello ,I am trying to make single column stack chart with 4 different column . Like At bottom there will be uk data for 2014 , on same column above uk there should be another data for france 2014 . X axis remains Same i.e 2014 but in single column stack there it will be all 4 state data for 2014 years. and the colour should be different for all stack. public Chartdata: Object[] = [ { x: '2014', y: 200 }, {x: '2014', y: 125 }, { x: '2014', y: 66.1 }, { x: '2014', y: 34.1 }];

Above image is that what i have tried .Below image is one that i need . Please Help me As Soon as Possible , So i can implement it .

Durga Gopalakrishnan · Answer

Hi Sourabh, 

Greetings from Syncfusion. 

We request you to specify single point for each series to achieve the reported scenario. We have prepared sample based on your requirement.  

  

Sample : https://stackblitz.com/edit/angular-zjigjx 

Kindly revert us if you have any concerns. 

Regards, 
Durga G

Sourabh Brajesh Sharma · Answer

Sir i know , this one and tried also but i want it in one single array and to show all stack in single series .

<e-series [dataSource]='Chartdata' type='StackingColumn' xName='x' yName='y' width='2'> </e-series>

I don't want to use multiple series to display and to display single stack which include all 4 country data into one object array

public Chartdata: Object[] = [

{ x: '2014', y: 200 }, {x: '2014', y: 125 }, { x: '2014', y: 66.1 }, { x: '2014', y: 34.1 }

];

like this one code ab

.

Durga Gopalakrishnan · Answer

Hi Sourabh, We suggest you to use pointColorMapping to apply different color for each points in a series. We have modified sample based on your requirement. Please check with below snippet and sample.

public data: Object[] = [ { x: '2014', y: 200, color:'red' }, { x: '2014', y: 125, color:'blue' }, { x: '2014', y: 66.1, color:'green' }, { x: '2014', y: 34.1, color:'yellow' } ]; UG : https://ej2.syncfusion.com/angular/documentation/chart/chart-types/#line-charts Sample : https://stackblitz.com/edit/angular-zjigjx-svn2sc Kindly revert us if you have any concerns. Regards, Durga G

Sourabh Brajesh Sharma · Answer

Hello Team ,

I want to know that for the above solution , How i should show different legends for different color stack .

Because ,when i am trying than it is showing only one legend , but i want 4 legends for which will display according to the color .

Code is same :

public Chartdata: Object[] = [

{ x: '2014', y: 200 }, {x: '2014', y: 125 }, { x: '2014', y: 66.1 }, { x: '2014', y: 34.1 }

];

and also tooltip hover should show specific stack name like if we hover on yellow stack so it will show

"color Germany : 124"

color is legend color which is in circle shape.

legendsShape='Circle'

but i want it ASAP , Please reply fast .

And thank you for the color solution

Durga Gopalakrishnan · Answer

Hi Sourabh, 

As of now, we don’t have legend support for each points in a series. We have already logged a feature request on this. Based on other logged tasks priority, this feature will be included in any of our upcoming release. You can keep track of the feature from the feedback portal below.  
  
Feedback Link : https://www.syncfusion.com/feedback/22311/ 
  
If you have any more specification/precise replication procedure or a scenario to be tested, you can add it as a comment in the portal.  

Kindly revert us if you have any concerns. 
 
Regards, 
Durga G

Sourabh Brajesh Sharma · Answer

which property is similar to setExtremes in syncfusion angular chart

This code is in highcharts but i can't get any property similar to this setExtremes . So please help

 this.chart.xAxis[0].setExtremes(
        ((number1 * this.config.itemsPerPage) - this.config.itemsPerPage), (number1 * this.config.itemsPerPage) - 1);

Srihari Muthukaruppan · Answer

Hi Sourabh, 

We can achieve your requirement using axisRangeCalculated event in the chart. Based on that we have prepared a sample for your reference. In which we have shown the output before and after zooming of axis. Please find the sample, code snippet and screenshot below. 

Sample : https://stackblitz.com/edit/angular-zjigjx-dd6uyj?file=app.component.html 
 
Code Snippet : 





// add your additional code here 
 
<ejs-chart style='display:block;' [chartArea]='chartArea' [primaryXAxis]='primaryXAxis' (axisRangeCalculated)='axisRangeCalculated($event)' [primaryYAxis]='primaryYAxis' [zoomSettings]='zoomSettings' [title]='title' [tooltip]='tooltip' (load)='load($event)'> 
 
// add your additional code here 
 
public axisRangeCalculated(args: IAxisRangeCalculatedEventArgs): void { 
    if (args.axis.name == 'primaryXAxis') { 
      console.log('Xmax : ' + args.maximum + ' ; Xmin : ' + args.minimum); 
    } 
    if (args.axis.name == 'primaryYAxis') { 
      console.log('Ymax : ' + args.maximum + ' ; Ymin : ' + args.minimum); 
    } 
  } 
 
// add your additional code here 
  
 
Screenshot : 
  
 
Let us know if you have any concerns. 

Regards, 
Srihari M

Sourabh Brajesh Sharma · Answer

Hello Team ,

Thank You for your all solutions.

Here i'm looking for some function like , when there is no data in data set or in database to display on chart than in the chart it should give message that "No Data to Display"  .

And i want this function for below Charts :

1: Bar Chart

2: HeatMap Chart

3: Pie Chart

4: Spline Chart

5: Tree Chart

6: Table Chart

7: Column Stack Chart

Below image is one example for what we want :

Please Reply ASAP , So i can implement it fast .

Thank You.

Durga Gopalakrishnan · Answer

Hi Sourabh, We have prepared sample based on your requirement. Please check with below snippet and screenshot. #1 : Bar, Pie, Spline, Stacked Column Charts We suggest you to include HTML DIV to show the custom message and load event to cancel chart rendering when series datasource is empty. In the sample, we have displayed DIV when data is empty and hidden the DIV when data is not empty. Please check with below snippet and sample.

//… public load1(args: ILoadedEventArgs): void { this.noData(args, "div1"); }; public load2(args: IAccLoadedEventArgs): void { this.noData(args, "div2"); }; //… public noData(args, name){ var count = 0; for(var i = 0; i < args.chart.series.length; i++) { if (args.chart.series[i].dataSource["length"] == 0 ) count = count + 1; } if(count == args.chart.series.length) { document.getElementById(name).style.display = "block"; args.cancel = true; } } Sample : https://stackblitz.com/edit/angular-fmcn5z # 2 : HeatMap Chart, Tree Chart We are validating your reported scenario. We will check this and update the details within two business days(11th August 2021). We appreciate your patience until then. Please revert us if you have any concerns. Regards, Durga G

Durga Gopalakrishnan · Answer

Hi Sourabh, Thanks for being patience. We have prepared sample based on your requirement for heatmap and diagram control. Please check with below sample and snippets. # 2 : HeatMap Chart We have provided the given message using the SVG element's text group. Refer to the below code snippet. if ( this.hm.dataSource.length == 0 || this.hm.dataSource.length == undefined ) { document .querySelector('#container_Container_TextGroup') .getElementsByTagName('text')[0].innerHTML = 'No data to display!'; } } Refer to the container element used. The "container" represents the HeatMap component's id value. Refer to the sample: https://stackblitz.com/edit/angular-bwvrgt-9vxcwu?file=app.component.ts # 3 : Tree Chart In the sample, we added the div with a custom message and use the dataloaded event to achieve your requirement. In the dataloaded event if the diagram node collection is empty means we hide the diagram tree chart and display the message and vise-versa. Code snippet: [.html]

No Data To Display

[.ts] public dataLoaded(arg) { if (this.diagram.nodes.length) { document.getElementById('diagramControl').style.display = 'block'; document.getElementById('div1').style.display = 'none'; } } Sample link: https://stackblitz.com/edit/angular-zojkcz?file=app.component.ts Kindly revert us if you have any concerns. Regards, Durga G

Sourabh Brajesh Sharma · Answer

Hello Team ,

If there is less Data than annonation shows properly but data goes in thousands than it overlap on top of the stack and in this we don't have to use intervals and also we don't want to use co-ordination point like x=0 , y=45 .

Refer Below Images :

for Less Data :

for Large Data :

Please Reply ASAP , that we can implement ,

Thank You

for Large Data :

Please Reply ASAP , that we can implement  ,Thank You

Baby Palanidurai · Answer

Hi Sourabh, Thanks for your update. We have checked your query and screenshot. We have prepared a sample to show annotation on top generic location for different values. For that, we have added annotation initially and changed the y location in the annotationRender event. Please find the below code snippet and sample link, Code snippet:

public annotationRender(args: IAnnotationRenderEventArgs): void { let length = (this.chart.series[0] as Series).points.length - 1; let value: number = 0; for (let i: number = 0; i <= length; i++) { value += this.chart.visibleSeries[0].stackedValues.endValues[i]; } args.content.children[0].children[0].innerHTML = value.toString(); args.location.y = (this.chart.series[0] as Series).points[ length ].symbolLocations[0].y; } Sample link: https://stackblitz.com/edit/angular-zjigjx-vxahc5?file=app.component.ts Kindly revert us, if the above doesn’t meet your requirement. Regards, Baby.