Angluar Line Chart - Not Displaying Correctly

[Jason]

HTML template:

<ejs-chart id="chart-container" [primaryXAxis]='primaryXAxis' [title]='title' [palettes]='palette'>

    <e-series-collection>

        <e-series [dataSource]='budget' type='Line' xName='entryDate' yName='dollars' name='Budget'></e-series>

        <e-series [dataSource]='actual' type='Line' xName='entryDate' yName='dollars' name='Actual'></e-series>

    </e-series-collection>

</ejs-chart>

I have the following data series:

Budget

[

    {

        "entryDate": "2020-06-21",

        "dollars": 148728.4

    },

    {

        "entryDate": "2020-07-05",

        "dollars": 140157.59

    },

    {

        "entryDate": "2020-07-19",

        "dollars": 122209.36

    },

    {

        "entryDate": "2020-08-02",

        "dollars": 107790.26000000001

    },

    {

        "entryDate": "2020-08-16",

        "dollars": 103857.78

    },

    {

        "entryDate": "2020-08-30",

        "dollars": 100832.81999999999

    },

    {

        "entryDate": "2020-09-13",

        "dollars": 99421.14

    },

    {

        "entryDate": "2020-09-27",

        "dollars": 94278.69

    },

    {

        "entryDate": "2020-10-11",

        "dollars": 90951.19

    },

    {

        "entryDate": "2020-10-25",

        "dollars": 33415.21

    },

    {

        "entryDate": "2020-11-08",

        "dollars": 33415.21

    },

    {

        "entryDate": "2020-11-22",

        "dollars": 33415.21

    },

    {

        "entryDate": "2020-12-06",

        "dollars": 33415.21

    },

    {

        "entryDate": "2020-12-20",

        "dollars": 33415.21

    }

]

Actual

[

    {

        "entryDate": "2020-06-21",

        "dollars": 158848.58

    },

    {

        "entryDate": "2020-07-05",

        "dollars": 178060.52000000002

    },

    {

        "entryDate": "2020-07-19",

        "dollars": 229936.66000000003

    },

    {

        "entryDate": "2020-08-02",

        "dollars": 203350.31000000003

    },

    {

        "entryDate": "2020-08-16",

        "dollars": 65645.54999999999

    },

    {

        "entryDate": "2020-08-30",

        "dollars": 49141.48999999999

    },

    {

        "entryDate": "2020-09-13",

        "dollars": 54936.42

    },

    {

        "entryDate": "2020-09-27",

        "dollars": 27380.96

    },

    {

        "entryDate": "2020-10-11",

        "dollars": 26684.89

    },

    {

        "entryDate": "2020-12-06",

        "dollars": 11405.37

    },

    {

        "entryDate": "2020-12-20",

        "dollars": 72314.97

    },

    {

        "entryDate": "2021-01-03",

        "dollars": 39985.42

    },

    {

        "entryDate": "2021-01-17",

        "dollars": 25861.010000000002

    },

    {

        "entryDate": "2021-02-14",

        "dollars": 31024.68

    },

    {

        "entryDate": "2020-10-25",

        "dollars": 1237.02

    },

    {

        "entryDate": "2020-11-08",

        "dollars": 7897.68

    },

    {

        "entryDate": "2020-11-22",

        "dollars": 25198.88

    },

    {

        "entryDate": "2021-01-31",

        "dollars": 23225.629999999997

    },

    {

        "entryDate": "2021-02-28",

        "dollars": 24528.24

    }

]

The resulting Line chart looks like this:

Budget Only:

Actual Only:

[Srihari Muthukaruppan]

Hi Jason, 

 

Here you have used Datetime Axis which is linear. But the data provided in the data source is not sorted with the DateTime values. We highly recommend you sort the data source before assigning it to the chart with configure with a linear axis to avoid this kind of scenario. 

 

Regards, 

Srihari M