We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

primaryXAxis settings not applied to chart series added dynamically

Hi,

I've configured the X axis of the chart as follows:

public primaryXAxis: Object = {
labelIntersectAction: 'Rotate45',
valueType: 'Category'
};

and in markup:

<ejs-chart [primaryXAxis]='primaryXAxis'...

but when I add the series dynamically to the chart from code:

const series = [];
myData.forEach(s => {
series.push({
dataSource: this.data,
type: 'Column',
xName: 'Category',
yName: s,
name: s,
width: 2,
marker: this.marker,
columnSpacing: '0.1',
tooltipMappingName: 'MappingName'
});
});
this.chart.addSeries(series);

the configuration does not apply to the X axis.

Any ideas on how to apply the X axis configuration to dynamically added series?



1 Reply 1 reply marked as answer

DG Durga Gopalakrishnan Syncfusion Team April 3, 2023 10:29 AM UTC

Hi Dimitris,


Greetings from Syncfusion.


We have ensured your reported scenario with attached code snippet. We have prepared sample based on your requirement. In an attached sample, we have rendered one series initially and on button click added another series. Chart primary x axis properties are applied properly for chart after adding series dynamically. Please check with the below snippet and screenshots.


<ejs-chart #chart [series]='seriesCollection'> </ejs-chart>

constructor() {

            let series = {

              type : 'Column',

              dataSource: this.data,                  

              xName: 'x',

              yName: 'y',

              name: 'Series1',               

            };

            this.seriesCollection.push(series);         

         };

    }

addSeries(){

        this.chart.addSeries([{

            type: 'Column',

            dataSource:this.newData,

            xName: 'x',

            yName: 'y',

            name :'Series2'

        }]);

    }


Screenshots :


Before Update


After Update



Sample : https://stackblitz.com/edit/angular-ctf6xb


If you are still facing problem, please try to replicate an issue in above sample or share us issue reproduced sample to validate this case further from our end. Kindly revert us if you have any other concerns.


Regards,

Durga Gopalakrishnan.


Marked as answer
Loader.
Up arrow icon