Is there a way I can hide the gridline in i5SPC charts?

[Former Member]

Hi Experts,

Is there a way I can  hide the grid lines in my i5SPC chart. I have not set a value or color but it defaults to the below color

in DOM

<line class="v-gridline" stroke="#fcdab0" stroke-width="2" x1="54" y1="0" x2="888.83" y2="0" shape-rendering="crispEdges" />

user did not like these lines and asked if we can remove these lines. I don't see and option in i5SPC chart template. I am using "com.sap.xmii.chart.hchart.i5SPCChart" in my irpt.

[former_member185280 · Accepted solution]

I was futzing around and I got this to work:

c.draw('content');

c.getChartObject().upperChart.getYAxis().getGridline().setVisible(false);

I guess the underlying ui5 object isn't created until the draw method is called so you have to call the setVisible after.

Regards,
Christian

[Private_Member_14935 · Accepted solution]

Hi Aneesh,

The above solution provided by Christian should work perfectly for you.

@Christian, that's a good work around... missed checking from that angle.

Thanks and Best Regards,

Ria

[Former Member]

Thank you so much Christian/Ria/Swaroop. Yes it is working now with passing false to setVisible. Business client is very happy.

Thanks again!!

[former_member185280]

Happy to help out. Please mark the question answered

Regards,
Christian

[Former Member]

Done. Thank you!

[swaroop_anasane]

Hi Aneesh,

Kindly mark Christian's answer as correct.

Thanks,

Swaroop

[Former Member]

This v-gridline was created from SAP-VIZ.js using SAPColorSingleAxis variable and that is being created automatically when I create the com.sap.xmii.chart.hchart.i5SPCChart object by passing the display and query template. So are you guys saying I can override the display chart policy of this mii ui5 object using CSS? Would you be kind enough to show a snippet where I can set that V-grid value of this SPC chart throug CSS?

Thank in Advance!

[Private_Member_14935]

Hi Aneesh,

You can change the css class properties once the DOM elements are created. However, there are no hook method which can help you with this.

Hence, another approach could be overriding the css style by adding the following piece of code in default.css in your project and referring to it.

.sapVizChart .v-gridline {

    stroke: #FFFFFF !important;

}

I verified this, and it works. However, some drawbacks with this approach. The style will get applied to any UI5 visualization object which uses this style class. Also the color needs to be hard-coded (ideally to hide grid-lines would mean grid-lines have same color as chart background)

Thus I think i5SPCChart should have grid-line color configurable.

Best Regards,

Ria

[swaroop_anasane]

Hi Aneesh,

There is a work around so that the CSS changes do not apply on each and every charts.

Best way would be to place the chart under a div with an is say "divChart1". While you want to modify CSS for this specific chart, write your css like:

#divChart1 .sapVizChart .v-gridline {

    stroke: #FFFFFF !important;

}

This would apply it for charts having "divChart1" as ID of parent element.

Hope this helps.

Best Regards,

Swaroop

[Private_Member_14935]

Hi Aneesh,

Yes, you are right there isn't an option to configure the gird lines in i5SPCChart.

However using css you can change/apply the color of the line class "v-gridline" to chart background color so that those lines don't appear.

Thanks and Best Regards,

Ria

[swaroop_anasane]

Hi Aneesh,

As Ria mentioned, use CSS properties to get the intended result.

Thanks,

Swaroop