Javascript Ej2 - Inverted Y axis with Line Chart does not work

[Dwi Latifah]

I have a Line Chart with an inverted Y-axis. The line displays fine when the axis is not inverted. But as soon as I set the Inversed property to true, the line disappears. Inverted axis seems to work fine with Column and Area charts.

I use the MultiColoredLine chart type. I need your help, thank you.

primaryYAxis:

{

isInversed: true,

minimum: 1,

maximum: 11,

interval: 1,

labelStyle: { color: '#ffffff', size: 10 }

}

Regards,

Rianti

Attachment:

[Nishanthi Panner Selvam]

Hi Dwi,

Greetings from Syncfusion.

We have ensured your reported scenario by setting isInversed as true in primaryYaxis. Chart is rendered properly without any exception. The tested sample can be downloaded from the attached sample.

Please find the below code snippet and screenshot of the sample for your reference.

Sample: https://stackblitz.com/edit/fmnp44?file=index.ts

• Since we are unable to replicate an issue from our end, we request you to share the following information which will be helpful for further analysis and provide you the solution sooner.
• Try to reproduce the reported scenario in above sample.
• Please share your sample (or) code snippet with full configurations.
• Share the details if you have done any other customization in your sample.
• Share your dataSource file.

Kindly revert us if you have any concerns.

Regards,

Nishanthi

[Dwi Latifah]

Hi  Nishanthi , thank you for your answer. 

I have seen and tried to implement the references you provided. But I still have the same problem if I change the chart type to 'MultiColoredLine'.

Below is the detailed code that I use:

var series1 = [];

        for (i = 0; i < 50; i++) {

          // Data update

          if (i % 2 == 0) {

            value = 4;

          } else if (i % 3 == 0) {

            value = 10;

          } else if (i % 5 == 0) {

            value = 2;

          } else {

            value = 8;

          }

          series1[i] = { x: i, y: value };

        }

        var chart = new ej.charts.Chart({

            width: '100%', height: '75%',

            primaryYAxis:

            {

                stripLines: [{ start: 5,width:0.2, visible: true, color: 'red' }],

                isInversed: true,

                minimum: 0,

                maximum: 12,

                interval: 1,

                visible: true,

                labelStyle: { color: '#ffffff', size: 10 }

            },

            primaryXAxis:

            {

                labelStyle: { color: '#ffffff', size: 10 }

            },

            series: [

                {

                  type: "MultiColoredLine",

                  segmentAxis: 'Y',

                  segments: [{

                    value: 12,

                    color: '#44de28'

                  }, {

                    value: 0,

                    color: 'red'

                  }],

                  dataSource: series1,

                  xName: "x",

                  yName: "y",

                  animation: { enable: false },

                }

            ],

            axisLabelRender: (args) => {

                if (args.axis.orientation === 'Vertical')

                    args.text = args.text + " mm/s";

            },

            tooltip: {

                enable: true, shared: true, enableAnimation: false

            }

        });

        chart.appendTo("#container");

Regards, 

Rianti

[Nishanthi Panner Selvam]

Hi Dwi,

We have considered your reported scenario as bug and logged a defect report for this issue. This fix will be available in our weekly patch release which is scheduled to be rolled out on June 20, 2023. We appreciate your patience until then. You can keep track of the bug from the below feedback link.

Feedback Link: https://www.syncfusion.com/feedback/44080/multicoloredline-series-chart-is-not-rendered-while-using-isinversed-as-true-in

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.

Regards,

Nishanthi

[Nishanthi Panner Selvam]

Hi Dwi,

Thank you for your patience

We have included the fix for multiColor line series not render using isinversed in our main release (v 22.1.34) . You can download the latest package from the below link

https://www.npmjs.com/~syncfusionorg

Sample: https://stackblitz.com/edit/fmnp44-j6gsuw?file=index.ts

Feedback: https://www.syncfusion.com/feedback/44080/multicoloredline-series-chart-is-not-rendered-while-using-isinversed-as-true-in

You can upgrade your package to the latest version to resolve the reported scenario.

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

Regards,

Nishanthi