Lines points in the wrong location.

[David House]

So I have been building a chart system for a while now for my client, and I am currently encountering a very odd situation, if I pass more than one data point into a stacked line then sometimes they will simply be in the same locations as one another, but if I use the legend to hide the one, the other will move to it's correct location, here's a gif to show:

And here is the code I am using to generate it.

1.     function BuildChart(widgetID, data, Settings) {
2.         ConvertDataTypes(data, Settings);
3. 
   
4.         var newtype = chartTypeData[Settings.tableindex].Id;
5.         if (Settings.xindexs.length > 1) {
6.             newtype = 'Stacking' + newtype;
7.         }
8. 
   
9.         var newseries = [];
10.         for (var i = 0; i < Settings.xindexs.length; i++) {
11.             var colname = Settings.xindexs[i].column;
12.             if (Settings.xindexs[i].columnType == 'number' && Settings.xindexs[i].aggregateoption != null) {
13.                 colname = Settings.xindexs[i].displaytext;
14.             }
15. 
    
16.             var newdata = {
17.                 dataSource: data, xName: Settings.yindex.column, yName: colname,
18.                 //Series type as stacked column
19.                 type: newtype,
20.                 name: colname,
21.             }
22. 
    
23.             newseries.push(newdata);
24.         }
25.         
26.         var xaxistype = Settings.yindex.columnType;
27. 
    
28.         var primaryX = {
29.             title: Settings.yindex.column,
30.             rangePadding: 'Round'
31.         };
32. 
    
33.         switch (xaxistype) {
34.             case ('date'):
35.                 xaxistype = 'DateTime'
36.                 primaryX.labelFormat = 'yyyy/MMM/dd'
37.                 primaryX.rangePadding = 'Additional'
38.                 break;
39.             case ('number'):
40.                 xaxistype = 'Double'
41.                 break;
42.             default:
43.                 xaxistype = 'Category';
44.                 break;
45.         }
46.         primaryX.valueType = xaxistype;
47.         primaryX.edgeLabelPlacement = 'Shift';
48. 
    
49.         var chart = new ej.charts.Chart({
50.             width: 'inherit', height: 'inherit',
51.             canResize: true,
52.             primaryXAxis: primaryX,
53.             primaryYAxis: {
54.                 title: Settings.xindexs[0].column,
55.                 labelFormat: '{value}'
56.             },
57.             commonSeriesOptions: {
58.                 enableAnimation: false
59.             },
60.             series: newseries,
61.             tooltip: { enable: true },
62.         });
63. 
    
64.         chart.appendTo('#' + widgetID);
65. 
    
66.         var tempobject = {
67.             width: 'inherit', height: 'inherit',
68.             canResize: true,
69.             primaryXAxis: primaryX,
70.             primaryYAxis: {
71.                 title: Settings.xindexs[0].column,
72.                 labelFormat: '{value}'
73.             },
74.             commonSeriesOptions: {
75.                 enableAnimation: false
76.             },
77.             series: newseries,
78.             tooltip: { enable: true }
79.         };
80.         var debugoutput = JSON.stringify(tempobject);
81. 
    
82.         return chart;
83.         //console.log(chart);
84.     }

The data is user supplied so it varies, however here is the json object of the debug object declared at the bottom: https://jsoneditoronline.org/#left=cloud.1450686424d847208b3608be4e18650e

Now there is also even more odd behaviour if I add three options:



I have no idea what is going on here, here is the debug json object: https://jsoneditoronline.org/#left=cloud.ef667a5f62634c1ab9b3f65641d52ac4

Also on the json objects, just click tree and it will show you the data I put into the tables. Thanks!

Edit: How do I post code in a better format? I see your official posts with clean code formatting and I'd like to be able to do that.

Edit 2: Found a solution, leaving this here for future users, 

Don't set lines to stacked.

[Durga Gopalakrishnan]

Hi David, 

  

Greetings from Syncfusion. 

  

Edit 1: How do I post code in a better format? I see your official posts with clean code formatting, and I'd like to be able to do that. 

  

We currently don’t have the support for code snippet option in the forums RTE. We have already logged a feature request for the same and will rollout this changes in our upcoming website release. As a workaround, you can copy the code from your IDE to your outlook mail and paste that content from the outlook mail to the RTE to give the code snippet as formatted, refer the screenshot below. 

 

 

  

Edit 2: Found a solution, leaving this here for future users, don't set lines to stacked. 

  

Stacked charts are used to visualize the sum values of the points in different series. Please find the behavior of the stacked line series using the below sample provided in the link. The Y-axis range will be calculated based on the total values of the series available in the chart. 

  

If you wish the ranges should not change on legend click, you can set minimum and maximum values to the Y-axis. 

  

Sample : https://stackblitz.com/edit/tsnvjm-aebtlj?file=index.ts 

  

 

  

If visualizing the sum values is not your requirement you can use the line chart to visualize your data. 

  

Please get back to us if you need any further assistance related to chart. 

  

Regards, 

Durga G