function readOnly(count){ }
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
+ 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 type="Category" position="bottom" fields="name" title="X Axis Title">
                    <apex:chartLabel rotate="270" font="9px Helvetica, sans-serif"/>
                <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"/>


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-:

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


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

</apex:chart> </apex:page>


Now the legend appears in Tahoma with size 10px.