Hide and change position(left/right) of Data Label of measures of a Line Chart of Viz frame

[raina_goyal]

Dear Experts,

I have a SAPUI5 requirement in which we have created a line chart using vizframe.(as we have version -1.28.48)

In above chart, month(x Axis) is the dimension and 3 measures of attendance is shown.

i.e - green - target value

red - current year

blue - previous year

Now , my requirement is to hide the data label for "Target Value(Green)" and change the alignment position for other two data label i.e. "current year(Red)" to right and "previous year(Blue)" to left.

I tried in debugger using jquery css i.e. $("g[data-datapoint-id=1]"), so target value data label were removed

but I am not sure how to implement it or in which event will it trigger and how the alignment will change.

Please help and suggest as this is really very urgent.

Thanks,

Best Regards,

Raina

[former_member293107 · Accepted solution]

Alternatively, you can also achieve this via the chart properties and override the renderer function of the data labels.

myVizChartObject.setVizProperties({
  plotArea: {
    dataLabel: {
      renderer: function(oLabel) {
        // if you want to remove the label text for Target Value
        if (oLabel.ctx.measureNames === "Target Value") {
          oLabel.text = "";
        } 
      }
    }
  }
});

For the full documentation, use the link below

https://sapui5.hana.ondemand.com/docs/vizdocs/index.html#reference/chartProperty/Charts/Line%20%20(3...

[raina_goyal · Accepted solution]

Dear Mark,

Yes you are correct, we can also achieve it via the solution provided by you.

Thanks for sharing it, I will definitely try with this as well.

Thanks,

Best Regards,

Raina

[raina_goyal]

Dear Wong,

Yes I agree that chart doesn't have any property to hide particular measure but now I did it with using Jquery or d3 by parent child manipulation. Ex:

to hide:

below is running in loop

$("g.v-plot-main").children("g.v-datalabel-group").children("g.v-datalabel.v-morphable-label").eq(i).children("text").remove()

where i is num of datameasure which needs to be hidden i.e. in my case first 12.

I hope it helps someone.

Thanks,

Best Regards,

Raina

[former_member602155]

Hello Raina,

In my case in a combination chart I want to hide the data label of a target measure which is not getting hided by using css.

I used the following css to hide the data labels in combination chart, it worked but hide all data labels

.Chart1 .v-datalabel-group .v-datalabel

{visibility: hidden;}

then I used the following css to hide the particular column or line but it didn't work.

.Chart1 .v-datalabel-group .v-datalabel .v-datapoint:data-datapoint-id="137" text */

Following is the html code in the dashboard output in internet explorer by pressing F12.

[raina_goyal]

Dear Rajiv,

Apologies for delayed response and I hope your problem is resolved now. But to answer your query, to my understanding it won't work like that.

Either use the solution approach suggested by Mark or shared by me above.

1. myVizChartObject.setVizProperties({

  plotArea:{
    dataLabel:{
      renderer:function(oLabel){//if you want to remove the label textforTargetValueif(oLabel.ctx.measureNames ==="Target Value") { 

oLabel.text="";}}}}});

2. Using jquery/d3(shared above).

Please let me know if something i am missing.

Thanks,

Best Regards,

[former_member196805]

Chart doesn't have property exposed to hide the data lables of a particular measure. You could either hide all the datalabels, or show them all.

[HemendraS]

Hi Raina,

Please use jQuery or D3, as follows:

$("g[data-datapoint-id=1] text").text("Raina"); or d3.select("#ID") for selection in DOM and rest is manipulation as per your requirements.

I hope this will answer your concerns.

Thanks,

Best Regards

Hemendra

[raina_goyal]

Please can someone help here..