How To put Menu Bar over Chart and remove the background

[Sourabh Brajesh Sharma]

.html

<div class="overlay">

    <ejs-menu id="menu" [items]='menuItems' title='' hamburgerMode='true' type='Over' style="background-color: white;">

    </ejs-menu>

      <ejs-chart [primaryXAxis]='xAxis' [primaryYAxis]='yAxis' [title]='chartTitle' [tooltip]='tooltipSettings'

        [legendSettings]='legend' style="z-index: -1; width: fit-content; position: absolute;">

        <e-series-collection>

          <e-series [dataSource]='data' type='Spline' xName='month' yName='sales' name='Sales' [marker]='markerSettings'>

          </e-series>

        </e-series-collection>

      </ejs-chart>

  </div>

--------------------------------------------------------------------------------------------------------------------------------------------

.css

.overlay{

  position: absolute;

  width: 8%;

  height: 5%;

  font-size: 10px;

  z-index: 1;

  margin-top: 100px;

}

Here I'm using here Spline Chart and I've to place menu bar over the chart . So i have hamburgermode which is true . but i can't overlay on chart so Any one who can help me with this problem.

[Durga Gopalakrishnan]

Hi Sourabh, 

We are validating your reported scenario. We will check this and update the status within two business days(13^th July 2021). We appreciate your patience until then. 

Regards, 

Durga G 

[Durga Gopalakrishnan]

Hi Sourabh, 

 

Thanks for being patience. 

 

We have achieved your requirement by overriding CSS style for Menu. Please check with the below snippet and sample. 

 

app.component.css 

.e-menu-wrapper .e-ul .e-menu-item.e-focused {  

  background-color: transparent;  

}  

.e-menu-wrapper.e-hamburger .e-popup.e-menu-popup {  

  background-color: transparent;  

}  

.e-menu-wrapper ul .e-menu-item.e-selected {  

  background-color: transparent;  

  border: 1px solid;  

} 

 

 

 

Sample : https://stackblitz.com/edit/angular-w7ovkh?file=app.component.css 

 

If the provided solution doesn’t meet your requirement, please revert us. 

 

Regards,  

Durga G