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; } } }

How to format bar series label in HTML5 charts?

BIRT User

Hi,
I have requirement where i have to format the negative series values in HTML5 bar chart.
If the value is negative, then i have to display it like below over/under the bars.
Eg. -34.78 should be displayed like (34.78). And the positive value should displayed as it in black font color. 
 
The negative sign should be replaced with round brackets and the font color should be 'Red'.
 
Please help me on how to implement this in HTML5 bar chart.
 
Note: I am using BDPro designer. 
 
Thanks,
Ragu

Find more posts tagged with

Comments

Clement Wong

You can use the series dataLabels formatter (@ <a data-ipb='nomediaparse' href='http://api.highcharts.com/highcharts#plotOptions.series.dataLabels.formatter'>http://api.highcharts.com/highcharts#plotOptions.series.dataLabels.formatter</a>) to change label text and color.
<pre class="_prettyXprint">
beforeGeneration: function(options)
{
 options.series[0].dataLabels.formatter = function () {

 if (this.y < 0)
 return '(' + (-1 * this.y) + ')';
 else
 return this.y;

 };
},
</pre>
Attached is an example.

BIRT User

Thanks Wong!!. It solved my issue.

Neojet

Hello,
 
I think my problem, is not so far this script.
It's about, when i got a value = 0, the datalabel go inside the negative bar. (Attached is an example).
Is it possible to just rise up the datalabel in this case ?
 
 
 
P.S : Since i use the second type of bar chart, I already use in my script :
<blockquote class="ipsBlockquote">
 
beforeDrawSeries: function(series, seriesOptions, chart, seriesIndex)
<div>{</div>
<div>//You can change seriesOptions here.</div>
<div>seriesOptions.dataLabels.inside=false;</div>
<div>},</div>
</blockquote>
 
 
Thank you very much for your help.

Clement Wong

Please attach a sample report.

Neojet

Please see a sample of my report with the source.
 
In fact, i just wanna the label of serie1 (only positive value) are above the x axis and the labels of serie2 (only negative value) under the x axis.
 
Thank you

Clement Wong

Try this:
<pre class="_prettyXprint _lang-">
beforeDrawDataPoint: function(point, pointOptions, chart, seriesIndex, pointIndex)
{

pointOptions.dataLabels = {

formatter: function() {
if (this.series.index == 0) {

if (this.y >= 0) return null;
else return this.y;
}
else {
if (this.y <= 0) return null;
else return this.y;
}
}
}

},
</pre>