function readOnly(count){ }
Sign Up ›
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
Learn More

Browse by Topic
ShowAll Questionssorted byDate Posted
+ Start a Discussion
Matthieu RemyMatthieu Remy 

apex:legend font attribute unresponsive

Hi Developer Community,

 

Can you please help me? I am playing around with the Visualforce Charting functionality that is in pilot.

 

I am having some unexpected behavior with the "font" attribute of the "apex:legend" component.

 

Indeed, in the example below, while I specify that the legend should have a font size of 9px, the chart that is rendered in my browsers has a legend that is bigger than 9px.

 

I observed the same beavihor in my Mozilla, IE, and Chrome browsers.

 

 

Would you have an idea why this is happening? If not, maybe you have a workaround to display my legend in a smaller font?

 

Thanks in advance,

Matt Remy

 

<apex:chart id="mychart" height="400" width="600" data="{!data}" legend="true">
              

 <apex:legend position="bottom" font="9px Helvetica"/>
            
                <apex:axis type="Numeric" position="left" fields="data1,data2,data3" title="Y Axis Title" grid="true">
                    <apex:chartLabel font="9px Helvetica, sans-serif"/>
                </apex:axis>


                <apex:axis type="Category" position="bottom" fields="name" title="X Axis Title">
                    <apex:chartLabel rotate="270" font="9px Helvetica, sans-serif"/>
                </apex:axis>
                
                <apex:lineSeries id="lineseries1" title="Line 1 Title" axis="left" xField="name" yField="data3" markerType="circle" markerSize="4" markerFill="#92D400" showInLegend="true">
                    <apex:chartLabel font="9px Helvetica, sans-serif"/>
                </apex:lineSeries>
            </apex:chart>

 

Best Answer chosen by Admin (Salesforce Developers) 
Matthieu RemyMatthieu Remy

Hi all,

 

I found a workaround to display the legend with the font and size I want. It involves playing with custom CSS. Using Firebug, I noticed that the chart legends labels are encapsulated within a <text> element that always has an id starting with ExtBox1-ext-sprite-, then the label itself is embedded within a <tspan> element.

 

So I defined an apex:component that contains a custom css that looks like this. Note the syntax that applies the font to all tspan element contained within a text element with id starting with ExtBox1-ext-sprite-:

<apex:component>
<style type="text/css" media="screen">
text[id^='ExtBox1-ext-sprite-'] tspan{
	font: 10px Tahoma;
}
</style>
</apex:component>

 

Then, I added that componentt within a <head> tag in the VF page containing my chart. Something like this:

<apex:page>
<head>
	<c:myCustomCSS/>
</head>
<apex:chart>
<apex:legend>
 ...
<apex:legend>
</apex:chart>
</apex:page>

 

Now the legend appears in Tahoma with size 10px.