Hi Everyone,

I am trying to customize the font on the tooltip. I need to display the metric value in bold font in the tool tip like Revenue: $2350, keeping the metric title 'Revenue' in normal font. I have included my code below, Please provide your inputs on this.

Note: I have customized my tooltip to show both the Revenue and Gross Profit values to display when hovered on purpose.

 
ENGINE INT CACHE SET ON
SET PAGE-NUM=NOLEAD
-DEFAULTH &WF_HTMLENCODE=OFF;
SET HTMLENCODE=&WF_HTMLENCODE

SET ARGRAPHENGINE=JSCHART
-DEFAULTH &WF_EMPTYREPORT=ON;
SET EMPTYREPORT=&WF_EMPTYREPORT

SET EMBEDHEADING=ON
SET GRAPHDEFAULT=OFF
-DEFAULTH &WF_STYLE_UNITS='PIXELS';
-DEFAULTH &WF_STYLE_HEIGHT='405.0';
-DEFAULTH &WF_STYLE_WIDTH='770.0';
-DEFAULTH &WF_TITLE='WebFOCUS Report';
GRAPH FILE wf_retail_lite
SUM 
REVENUE_US
GROSS_PROFIT_US
COMPUTE REV_TOOL_TIP/D20.2M=REVENUE_US;
COMPUTE PROFIT_TOOL_TIP/D20.2M=GROSS_PROFIT_US;
BY TIME_DATE AS 'Transaction Date'
WHERE TIME_DATE GE '20171215';
WHERE TIME_DATE LE '20171231';
WHERE PRODUCT_CATEGORY EQ 'Computers';
ON GRAPH PCHOLD FORMAT JSCHART
ON GRAPH SET VZERO ON
ON GRAPH SET GRWIDTH 1
ON GRAPH SET UNITS &WF_STYLE_UNITS
ON GRAPH SET HAXIS &WF_STYLE_WIDTH
ON GRAPH SET VAXIS &WF_STYLE_HEIGHT
ON GRAPH SET LOOKGRAPH BAR
ON GRAPH SET AUTOFIT ON
ON GRAPH SET STYLE *
*GRAPH_SCRIPT

setPieDepth(0);
setPieTilt(0);
setDepthRadius(0);
setCurveFitEquationDisplay(false);
setPlace(true);

*END
INCLUDE=IBFS:/FILE/IBI_HTML_DIR/ibi_themes/Warm.sty,$
TYPE=REPORT,CHART-SERIES-LAYOUT=ABSOLUTE,TITLETEXT=&WF_TITLE.QUOTEDSTRING, $
TYPE=DATA, COLUMN=N1, BUCKET=x-axis, $
TYPE=DATA, COLUMN=N2, BUCKET=y-axis, $
TYPE=DATA, COLUMN=N3, BUCKET=y-axis, $
TYPE=DATA, COLUMN=REV_TOOL_TIP, BUCKET=tooltip, $
TYPE=DATA, COLUMN=PROFIT_TOOL_TIP, BUCKET=tooltip, $
TYPE=DATA, COLUMN=TIME_DATE, BUCKET=tooltip,$

*GRAPH_JS
blaProperties: {
   absoluteInset: 0.7
  }
*END
*GRAPH_SCRIPT

setReportParsingErrors(false);
setSelectionEnableMove(false);
setDisplay(getO1Title(),false);
setDisplay(getY1Title(),false);
setTextRotation(getO1Label(),0);
setDisplay(getY1MajorGrid(),true);
setFillColor(getSeries(0),new Color(0,191,147));
setTransparentBorderColor(getSeries(0), true);
setFillColor(getSeries(1),new Color(0,90,126));
setTransparentBorderColor(getSeries(1), true);
setTextRotation(getO1Label(),0);
setLegendPosition(1);
setTextFormatPreset(getY1Label(),6);
setAutoSkip(getO1Label(),2);
setPlaceSkip(getO1Label(),0);
setSkipBegin(getO1Label(),0);
setSkipCount(getO1Label(),6);
*GRAPH_JS_FINAL
series: [
{series: 'reset', "tooltip":"Your Revenue:"+ '{{tooltip1}}'+"<br>"+ "Your Gross Profit:"+ '{{tooltip2}}'+"<br>"+ "Transaction Date:"+ '{{tooltip3}}'}
],
"xaxis": {
    "title": {
        "visible": false
    }
},
"yaxis": {
    "title": {
        "visible": false
    }
}
*END
ENDSTYLE
END
-RUN
-HTMLFORM BEGIN
    <style>

			div#jschart_HOLD_0 div {
            border: 0 !important;
		}
    </style>
-HTMLFORM END


 

This message has been edited. Last edited by: FP Mod Chuck,

Hi,
Below is solution of your code.
Use bold tag (b) just before and after the tooltip value.

For example:-

series: [
{series: 'reset', "tooltip":"Your Revenue:" + " "+ '{{tooltip1}}'+ "" + "
"+ "Your Gross Profit:"+""+ '{{tooltip2}}'+"[/b]"+"
"+ "Transaction Date:"+ ""+'{{tooltip3}}'+""}
],

8207.06, Window 7

Thank you very much Purushottam. b tag worked for me.