nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

Chart - Changing label value position depending on it's value

NDJ19_

Hello,
 
I'm trying to change the label value position of a specific serie depending on it's value.
 
In the sample report as attachment, my goal is to display outside serie 1 all values higher than 70.
 
With the code :
<pre class="_prettyXprint _lang-js">
importPackage(Packages.org.eclipse.birt.chart.model.attribute);

function afterDataSetFilled( series, dataSet, icsc )
{
if(series.getSeriesIdentifier() == "Series 1"){
series.setLabelPosition(Position.OUTSIDE_LITERAL);
}
}
</pre>
I'm able to change the position of all labels of my series 1 and put them outside. But my need is to change the position only if the value is higher than X.
 
Can you please help me to do it?
 
Thank you in advance for you help.

Find more posts tagged with

Comments

Clement Wong

Here is one solution that modifies the position of the label on each point:
<pre class="_prettyXprint">
function beforeDrawDataPointLabel( dph, label, icsc )
{
if (dph.getDisplayValue() > 70) {
 var leftPos = label.getInsets().getLeft();
 label.getInsets().setLeft(leftPos+170);
 }
}</pre>

NDJ19_

Thanks for you answer. It work if the label does not contain any prefix and any suffix.
 
But if I try something like as attachment with a prefix and a suffix, the getInserts() does not work as expected
 
Any idea how to get around?
 
Thanks again for your time

Clement Wong

Remove the prefix, suffix and separator from the UI. Then, add the prefix and suffix in beforeDrawDataPointLabel:
<pre class="_prettyXprint">
function beforeDrawDataPointLabel( dph, label, icsc )
{
if (dph.getDisplayValue() > 70) {
 var leftPos = label.getInsets().getLeft();
 label.getInsets().setLeft(leftPos+180);
 }

label.getCaption().setValue("val:" + dph.getDisplayValue() + "%")
}</pre>

NDJ19_

It works perfectly! Thank for you help