Infochart Combination chart css-how to hide data lables for line only

[rafal_skorupa1]

Hi

I am trying to hide data labels related to line on my infochart(DS1.6).

I would like to have data labels for bars only. I tried to search for a proper css class with IE F12. I tried to use following code, but no luck:

.DPInfochart svg.v-m-root g.v-m-main g.v-m-plot g g.v-plot-main g.v-datalabel-group g.v-datalabel v-morphable-label text

{

visibility:hidden !important;

}

.DPInfochart g.v-markers g.v-datashapesgroup, g.v-m-datalabel g.v-datalabel text

{

visibility:hidden !important;

}

Any of you was able to achieve such thing with with CSS? I haven't found similar case on this forum.

[Former Member · Accepted solution]

Hi ,

Can you provide some additional details ?

1. Chart will show only 12 months of data or any extra months will be added?
2. Please provide a sample screenshot of your Developer menu (IE F12) pointing the data label 1.15 ( data corresponds to 06.2015)

Thanks,

Ganesh

Visual BI

[rafal_skorupa1 · Accepted solution]

Hello

My chart always shows 13 months however these are rolling 13 months so it might be 01.2015 to 01.2016 or 03.2016 to 03.2017. I would like to remove all labels that are related to line on my chart:

Thanks in advance for your support.

Regards

Rafał

[Former Member · Accepted solution]

Hi Rafal,

Following CSS is based on 13 months trend.

Please copy paste the below css and let me know.

Custom Class to mention in chart : data_hide

.data_hide .v-datalabel.v-morphable-label:NTH-CHILD(14) > text,.data_hide .v-datalabel.v-morphable-label:NTH-CHILD(15) > text,.data_hide .v-datalabel.v-morphable-label:NTH-CHILD(16) > text,.data_hide .v-datalabel.v-morphable-label:NTH-CHILD(17) > text,.data_hide .v-datalabel.v-morphable-label:NTH-CHILD(18) > text,.data_hide .v-datalabel.v-morphable-label:NTH-CHILD(19) > text,.data_hide .v-datalabel.v-morphable-label:NTH-CHILD(20) > text,.data_hide .v-datalabel.v-morphable-label:NTH-CHILD(21) > text,.data_hide .v-datalabel.v-morphable-label:NTH-CHILD(22) > text,.data_hide .v-datalabel.v-morphable-label:NTH-CHILD(23) > text,.data_hide .v-datalabel.v-morphable-label:NTH-CHILD(24) > text,.data_hide .v-datalabel.v-morphable-label:NTH-CHILD(25) > text,.data_hide .v-datalabel.v-morphable-label:NTH-CHILD(26) > text

{visibility: hidden !important;}

I hope this helps you.

Thanks,

Ganesh

Visual BI

[rafal_skorupa1 · Accepted solution]

Thanks a lot it's working as expected:

Thank you !

Regards

Rafał

[Former Member]

Hi Ganesh,

Can you help me how to use this CSS code if we have more than one line in the chart. I tried your code its working for me and it is hiding the data labels for one line in the chart but my chart has multiple lines, so can you please show me how to hide the data labels for other lines in the chart.

Chart Type: Line Chart (Info Chart Component)

Regards,

Arun Krishnan G

[rafal_skorupa1]

Hi Arun

Problem with data labels of this chart is a fact that they are not divided into groups related to each line or column group. The only way of referencing  certain datalabel is to find its ID.

Currently I am using different code that is using node selectors nth-child(n) and nth-last-child(n). Maybe you will be able adjust my code to your needs:

/******Hides second half of data labels for maximum 20 columns*************/

.DPCombinationChart2 .v-datalabel.v-morphable-label:NTH-CHILD(n+2):last-child > text,

.DPCombinationChart2 .v-datalabel.v-morphable-label:NTH-CHILD(n+3):NTH-LAST-CHILD(-n+2) > text,

.DPCombinationChart2 .v-datalabel.v-morphable-label:NTH-CHILD(n+4):NTH-LAST-CHILD(-n+3) > text,

.DPCombinationChart2 .v-datalabel.v-morphable-label:NTH-CHILD(n+5):NTH-LAST-CHILD(-n+4) > text,

.DPCombinationChart2 .v-datalabel.v-morphable-label:NTH-CHILD(n+6):NTH-LAST-CHILD(-n+5) > text,

.DPCombinationChart2 .v-datalabel.v-morphable-label:NTH-CHILD(n+7):NTH-LAST-CHILD(-n+6) > text,

.DPCombinationChart2 .v-datalabel.v-morphable-label:NTH-CHILD(n+8):NTH-LAST-CHILD(-n+7) > text,

.DPCombinationChart2 .v-datalabel.v-morphable-label:NTH-CHILD(n+9):NTH-LAST-CHILD(-n+8) > text,

.DPCombinationChart2 .v-datalabel.v-morphable-label:NTH-CHILD(n+10):NTH-LAST-CHILD(-n+9) > text,

.DPCombinationChart2 .v-datalabel.v-morphable-label:NTH-CHILD(n+11):NTH-LAST-CHILD(-n+10) > text,

.DPCombinationChart2 .v-datalabel.v-morphable-label:NTH-CHILD(n+12):NTH-LAST-CHILD(-n+11) > text,

.DPCombinationChart2 .v-datalabel.v-morphable-label:NTH-CHILD(n+13):NTH-LAST-CHILD(-n+12) > text,

.DPCombinationChart2 .v-datalabel.v-morphable-label:NTH-CHILD(n+14):NTH-LAST-CHILD(-n+13) > text,

.DPCombinationChart2 .v-datalabel.v-morphable-label:NTH-CHILD(n+15):NTH-LAST-CHILD(-n+14) > text,

.DPCombinationChart2 .v-datalabel.v-morphable-label:NTH-CHILD(n+16):NTH-LAST-CHILD(-n+15) > text,

.DPCombinationChart2 .v-datalabel.v-morphable-label:NTH-CHILD(n+17):NTH-LAST-CHILD(-n+16) > text,

.DPCombinationChart2 .v-datalabel.v-morphable-label:NTH-CHILD(n+18):NTH-LAST-CHILD(-n+17) > text,

.DPCombinationChart2 .v-datalabel.v-morphable-label:NTH-CHILD(n+19):NTH-LAST-CHILD(-n+18) > text,

.DPCombinationChart2 .v-datalabel.v-morphable-label:NTH-CHILD(n+20):NTH-LAST-CHILD(-n+19) > text,

.DPCombinationChart2 .v-datalabel.v-morphable-label:NTH-CHILD(n+21):NTH-LAST-CHILD(-n+20) > text,

.DPCombinationChart2 .v-datalabel.v-morphable-label:NTH-CHILD(n+22):NTH-LAST-CHILD(-n+21) > text,

.DPCombinationChart2 .v-datalabel.v-morphable-label:NTH-CHILD(n+23):NTH-LAST-CHILD(-n+22) > text,

.DPCombinationChart2 .v-datalabel.v-morphable-label:NTH-CHILD(n+24):NTH-LAST-CHILD(-n+23) > text,

.DPCombinationChart2 .v-datalabel.v-morphable-label:NTH-CHILD(n+25):NTH-LAST-CHILD(-n+24) > text,

.DPCombinationChart2 .v-datalabel.v-morphable-label:NTH-CHILD(n+26):NTH-LAST-CHILD(-n+25) > text,

.DPCombinationChart2 .v-datalabel.v-morphable-label:NTH-CHILD(n+27):NTH-LAST-CHILD(-n+26) > text,

.DPCombinationChart2 .v-datalabel.v-morphable-label:NTH-CHILD(n+28):NTH-LAST-CHILD(-n+27) > text,

.DPCombinationChart2 .v-datalabel.v-morphable-label:NTH-CHILD(n+29):NTH-LAST-CHILD(-n+28) > text,

.DPCombinationChart2 .v-datalabel.v-morphable-label:NTH-CHILD(n+30):NTH-LAST-CHILD(-n+29) > text,

.DPCombinationChart2 .v-datalabel.v-morphable-label:NTH-CHILD(n+31):NTH-LAST-CHILD(-n+30) > text,

.DPCombinationChart2 .v-datalabel.v-morphable-label:NTH-CHILD(n+32):NTH-LAST-CHILD(-n+31) > text,

.DPCombinationChart2 .v-datalabel.v-morphable-label:NTH-CHILD(n+33):NTH-LAST-CHILD(-n+32) > text,

.DPCombinationChart2 .v-datalabel.v-morphable-label:NTH-CHILD(n+34):NTH-LAST-CHILD(-n+33) > text,

.DPCombinationChart2 .v-datalabel.v-morphable-label:NTH-CHILD(n+35):NTH-LAST-CHILD(-n+34) > text,

.DPCombinationChart2 .v-datalabel.v-morphable-label:NTH-CHILD(n+36):NTH-LAST-CHILD(-n+35) > text,

.DPCombinationChart2 .v-datalabel.v-morphable-label:NTH-CHILD(n+37):NTH-LAST-CHILD(-n+36) > text,

.DPCombinationChart2 .v-datalabel.v-morphable-label:NTH-CHILD(n+38):NTH-LAST-CHILD(-n+37) > text,

.DPCombinationChart2 .v-datalabel.v-morphable-label:NTH-CHILD(n+39):NTH-LAST-CHILD(-n+38) > text,

.DPCombinationChart2 .v-datalabel.v-morphable-label:NTH-CHILD(n+40):NTH-LAST-CHILD(-n+39) > text,

.DPCombinationChart2 .v-datalabel.v-morphable-label:NTH-CHILD(n+41):NTH-LAST-CHILD(-n+40) > text

{visibility: hidden !important;}

[Former Member]

Hi Rafal,

Thanks for the reply. I have modified your code based on my requirement and its working for me.

Regards,

Arun Krishnan G.

[former_member602155]

Hi Arun/Rafal/Ganesh,

I have also the same requirement in which i need to hide the data labels of all columns and lines except one line in combination chart.

after pressing F12 in IE i am getting the following html code.

<g xmlns="http://www.w3.org/2000/svg" font-family="'72-Web',Arial,Helvetica,sans-serif" font-size="12px" font-style="normal" font-weight="normal" fill="#000000" transform="translate(117.741 145.198)" data-datapoint-id="2968" cssString="fill:#000000;font-family:'72-Web',Arial,Helvetica,sans-serif;font-size:12px;font-weight:normal;font-style:normal;"><g><text>77.3 %</text></g></g>

<g xmlns="http://www.w3.org/2000/svg"><text>77.3 %</text></g>

html-code.png

And following is my css script written to hide the datapoint id 2968.

.Chart1.v-datalabel.v-morphable-label.v-datalabel:data-datapoint-id="2968">text

{ visibility:hidden !important; }

but it's not working at my end.

@ arun/rafal Could you please help me out how it worked in yours case.

Regards

RG

[former_member218152]

Hi Rafal,

Can you try this code. It worked for me.

.chart1 g.v-markers.v-datashapesgroup g.v-m-datalabel g.v-datalabel g text

{

visibility:hidden !important;

}

Regards,

Sathyan P

[rafal_skorupa1]

Thanks Sathyan

but It is a part of script that I've typed in my initial post and  unfortunately it doesn't work for me.

Regards

Rafał

[former_member218152]

Hi Rafal,

My Bad. I didn't mention clearly. It is the same code as yours but the difference is the last class

g.v-datalabel g text which worked for me.

Regards,

Sathyan P

[rafal_skorupa1]

I tried both : g.v-datalabel g text and g.v-datalabel text

and none of them seem to be working. Are you using the same chart type and DS version? DS1.6 and Infochart type:Combined Column Line.

Regards

Rafał