Overlap Y Axis from Column Chart and Line Chart

[Gabriel Alva]

Hi. I need to do something simple and I'm not sure if it's possible.

Right now I have this chart, with 2 series. 1 Column and 1 Line. I managed this with rows and spanning.
https://stackblitz.com/edit/alvagabriel-overlap-axisy?file=app.component.html

The thing is what I really would want is both series sharing the same space for their Y Axis, but not share the same Y Axis. I would like to accomplish something like this. Both series have their own Y Axis but they are sharing the same space. Also, it would be possible to do this while hidding the Y Axis values from the right and the left? I want just the columns and the line to be visible.



Thank you.

Best regards,
Gabriel

[Durga Gopalakrishnan]

Hi Gabriel,

Greetings from Syncfusion.

Your requirement can be achieved using multiple axis. By default, when multiple y axis is specified, then row index is zero for all axes. The row and column index can be used only while splitting the chart into rows and columns. To display secondary y axis in opposite direction, you can enable opposedPosition for that axis. We have attached modified sample for your reference. 

UG Link : https://ej2.syncfusion.com/angular/documentation/chart/axis-customization/#multiple-axis

Online Demo : https://ej2.syncfusion.com/angular/demos/#/material/chart/multiple-axis

Sample : https://stackblitz.com/edit/alvagabriel-overlap-axisy-uayo1b

Kindly revert us if you have any concerns.

Regards,

Durga G

[Gabriel Alva]

Thank you very much, that helped me a lot!

Now I just need 1 more thing. I want to hide labels for both Y Axis. For the primaryYAxis I can use the property labelStyle and change the font to 0.01px or the color to transparent. But if I try to use the same property for the directive e-axis It doesn't work. I wan't to accomplish this:


This is my project sample
https://stackblitz.com/edit/alvagabriel-overlap-axisy-4b34qp

Thank you

[Durga Gopalakrishnan]

Hi Gabriel,

We have validated your reported scenario. As of now, we are facing problem in accessing properties of secondary axis in tag level, so we suggest you use as array of object. We have attached modified sample for your reference. 

<ejs-chart [axes]='axis'>
</ejs-chart>
 public axis: Object = [    {
      majorGridLines: { width: 0 },

      majorTickLines: { width: 0 },

      opposedPosition: true,

      lineStyle: { width: 0 },

      name: "yAxis1",

      labelStyle: {

        size: "0px"

        //color: "transparent" // Dont show labels

      }

    }

  ];

Sample : https://stackblitz.com/edit/alvagabriel-overlap-axisy-u5qocd

API Link : https://ej2.syncfusion.com/angular/documentation/api/chart/axisModel/#visible

Note : If you need to disable all axis properties, you can set visible as false

Please revert us if you have any concerns.

Regards,

Durga G