i want to realign the pie chart label from
existing: "name" and "percent value"
eg: employee/self (29%)

needed: "percent value" and "name"
eg: 29% employee/self

Also different font styling for "percent value" and "name"

eg: see attached document showing the differences and code used in sample chart.

https://www.scribd.com/documen...06875/PiechartLabels

This message has been edited. Last edited by: vinodh,

let me know if anyone doesnt have access to the document file.

As these charts are format JSCHART, you have the option of coding some javascript to format the text.

Take a look at the documentation on "formatCallback".

Here is an example of formatting the labels and tooltips

DEFINE FILE CAR 
COUNTRY_Def/A20V= IF CAR.ORIGIN.COUNTRY EQ 'ITALY' THEN 'CHILD/DEPENDANT' ELSE
IF CAR.ORIGIN.COUNTRY EQ 'ENGLAND' THEN 'SPOUSE/PARTNER' ELSE 
IF CAR.ORIGIN.COUNTRY EQ 'W GERMANY' THEN 'EMPLOYEE/SELF';
END
ENGINE INT CACHE SET ON 
SET PAGE-NUM=NOLEAD 
SET HTMLENCODE=ON 
SET ARGRAPHENGINE=JSCHART 
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 car 
-* Created by Info Assist for Graph
 
SUM CNT.CAR.COMP.CAR AS ' ' 
BY CAR.ORIGIN.COUNTRY_Def 
WHERE CAR.ORIGIN.COUNTRY IN ( 'ENGLAND' , 'ITALY' , 'W GERMANY' ); 
ON GRAPH PCHOLD FORMAT JSCHART 
ON GRAPH SET VZERO OFF 
ON GRAPH SET GRWIDTH 1 
ON GRAPH SET AUTOFIT ON 
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 PIE 
ON GRAPH SET AUTOFIT ON 
ON GRAPH SET STYLE * 
*GRAPH_SCRIPT 
setPieDepth(0); 
setPieTilt(0); 
setDepthRadius(0); 
setPieFeelerTextDisplay(1); 
setPlace(true); 
setCurveFitEquationDisplay(false); 
*END 
INCLUDE=IBFS:/FILE/IBI_HTML_DIR/ibi_themes/Warm.sty,$ 
TYPE=REPORT, TITLETEXT=&WF_TITLE.QUOTEDSTRING, PAGESIZE=LEGAL, $ 
TYPE=DATA, COLUMN=N1, BUCKET=color, $ 
TYPE=DATA, COLUMN=N2, BUCKET=measure, $ 
*GRAPH_SCRIPT 
setReportParsingErrors(false); 
setSelectionEnableMove(false); 
setFillColor(getSeries(2),new Color(87,182,150));
setFillColor(getSeries(0),new Color(0,148,215)); 
setFillColor(getSeries(1),new Color(0,82,115)); 
setDisplay(getLegendArea(),false); 
setTextFormatPreset(getPieSliceLabel(),2); 
setPieLabelDisplay(3); 
setPieFeelerTextDisplay(2); 
setDataTextDisplay(true); 
setFontSizeAbsolute(getPieSliceLabel(),true); 
setAutofit(getPieSliceLabel(),false); 
setPlaceResize(getPieSliceLabel(),0); 
setFontSizeAbsolute(getPieSliceLabelInside(),true); 
setAutofit(getPieSliceLabelInside(),false); 
setPlaceResize(getPieSliceLabelInside(),0); 
setFontSizeInPoints(getPieSliceLabel(),18); 
setFontSizeInPoints(getPieSliceLabelInside(),18); 
setFontSizeInPoints(getPieRingLabel(),24); 
setFillColor(getPieRingLabel(),new Color(0,47,85)); 
setFillColor(getPieSliceLabel(),new Color(0,83,115)); 
setFillColor(getPieSliceLabelInside(),new Color(0,83,115)); 
setPieSliceDetach(getSeries(*), 0); 
setPieSliceDelete(0,false); 
setPieSliceDelete(1,false); 
setPieSliceDelete(2,false); 
setPiesPerRow(4); 
setTextFormatPreset(getPieRingLabel(),1); 
setDisplay(getPieRingLabel(),false); 
*GRAPH_JS_FINAL 
"pieProperties": { 
    "holeSize": "75%",    	
}, 
"agnosticSettings": { 
    "chartTypeFullName": "Pie_Ring" 
},
"series":[{
    "series": "reset",
    "tooltip": "<div style='text-align:center'><span style='font-family:Times New Roman;font-size:30px;font-weight:700'>{{series_percent}}</span><br>[b]{{series_label}}[/b]</div>"
}],
"dataLabels": {
    "visible": true,
    "formatCallback": function(data, series, group, dataset){
        return '<div style="text-align:center"><span style="font-family:Times New Roman;font-size:50px;font-weight:700">' + Math.round(data.value / dataset.total * 10000)/100 + '%</span><br>' + this.getSeries(series).label +'</div>';
    }
}
*END 
ENDSTYLE 
END 
-RUN  
 

Read docs here: Introduction to JSON Properties for HTML5 Charts

This message has been edited. Last edited by: Hallway,

@hallway - thank you, you made it look so simple.

@waz - i didnt know all these days. now i look at it in the technical glossary. thank you. i will start playing with it.

Excellent. Glad to help. There's a lot of good stuff in those charting docs.

If you're using a modern browser that utilizes ES6 ( almost every browser but Internet Explorer ), you can use template literals to create your labels https://caniuse.com/#feat=template-literals

    "formatCallback": function(data, series, group, dataset){
        return `<div style="text-align:center"><span style="font-family:Times New Roman;font-size:50px;font-weight:700">${Math.round(data.value / dataset.total * 10000)/100}%</span><br>${this.getSeries(series).label}</div>`;
    }

More on Template Literals here: https://css-tricks.com/template-literals/

Don't forget to change the title of the post to start with [SOLVED] if this has indeed solved the issue.

@Hallway.....sure i ll do...u r one sort of synonymous to hellboy in JS charting.