CSS-Styling InfoChart in DS1.6

[howsy]

Dear all,

previously I was styling the first Bar of my Column-Chart in a different color, than all the other bars, which was working fine with the "old" Chart Component.

CSS-Code:

.old_chart g.v-m-main g.v-m-plot g.v-column:nth-child(1) .v-datapoint.v-morphable-datapoint {

            fill: #004986;

}

Now with Design Studio 1.6 I want to use the InfoChart component. But with that new component I am not able anymore to communicate to the first column. Can anybode of you help me with that topic? I am using an InfoChart type "Column Chart".

I found a discussion where the data labels of an InfoChart Combination should be hidden, which was working. Therefore I guess CSS-styling is possible in general for the new InfoChart componentn?

http://scn.sap.com/thread/3906308

Many thanks in advance,

Regards,

Chris

[MustafaBensan · Accepted solution]

Hi Chris,

Try the following CSS example for the first column:

.chartColumn1 g.v-m-main g.v-m-plot g.v-plot-main g.v-datapoint-group .v-datapoint:nth-child(2) rect

{ 

   fill: #004986;

}

Then via scripting you apply INFO_CHART.setCSSClass("chartColumn1");

Regards,

Mustafa.

[howsy · Accepted solution]

You are my personal hero of the moment. How did you come up with that little "rect" in the end? I couldn't find anything like that in the source code? For what does this stand for?

Regards,

Chris

[MustafaBensan · Accepted solution]

Hi Chris,

Glad it worked for you.  Coincidently I've been doing a fair bit of work on InfoChart CSS over the last week so your question just happened to be timely

I must admit the "rect" element had me stumped for a while too and there was some trial and error involved to get the right syntax.  InfoCharts are based on SVG and use the rect element for defining the chart columns as far as I could tell.  It shows up in the IE Developer Tools output as seen below:

Regards,

Mustafa.

[former_member602155 · Accepted solution]

Hello Mustafa,

I have one combination chart in which there are two charts ( column chart and line chart). Here my requirement is to hide the data labels of all the columns and lines except (one line - shown in dark black colour). Please find the below screenshot.

After taking the following example of one column bar after pressing F12 in IE, I tried to hide data label of one month i.e 004.2017 having value of 77.3% by using css script.

I implemented the following css script at dashboard application level for one (datapoint-id) -as shown above but it is not working.

.Chart1

g.v-datalabel g.v-morphable-label g.v-datalabel-group.v-datapoint:data-datapoint-id="2968" text

{

visibility:hidden!important;

}

It will be a great help for me if you can suggest what correction need to done in the CSS script.

Regards

RG