Apex:charts – Changing the appearance of apex:axis titles

I’ve been exploring the use of the apex:chart tag functionality recently (see below a bar chart of favorite pie fillings). I am now at the point where I want to modify the appearance of the chart.

I am more than happy with using the apex:chartLabel tag to alter the appearance/styling of axis value labels (see rotation below), but is there any way to change the appearance/styling of the axis titles? Ideally I would like these to be smaller, but I can’t see any tag level option to do this, am I missing something?

enter image description here

Chart markup:

<apex:chart height="250" width="100%" data="{!pieData}" >
    <apex:axis type="Category" position="bottom" fields="name" title="Fillings">
        <apex:chartLabel rotate="315"/>
    </apex:axis>
    <apex:axis type="Numeric" position="left" fields="data" steps="1" minimum="0" title="count"/>
    <apex:barSeries xfield="name" yfield="data" orientation="vertical" axis="bottom" colorsProgressWithinSeries="true"/>
</apex:chart>

Answer

Unfortunately there is no standard way of changing the styling of the titles of apex:axis components. Using apex:chartLabel only changes the formatting of the labels themselves (the text or numbers) rather than the axis titles.

You can however use SfdcApp.Visualforce.chart.VFChartMgrInst.afterMethod() and a bit of jQuery to change the styles of the apex:axis titles after the chart has been loaded, it may be possible to improve the selectors I’ve used, but these should work for your example.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script type="text/javascript">
    var $j = jQuery.noConflict();

    SfdcApp.Visualforce.chart.VFChartMgrInst.afterMethod('load', function()
    {
        var xAxis = $j( "text[text='{!multipicklistFieldName}'][id^='vfext4-ext-sprite-']");
        xAxis.attr('font', 'bold 5px Arial');
        xAxis.css('font', 'bold 5px Arial');

        var yAxis = $j( "text[text='count'][id^='vfext4-ext-sprite-']");
        yAxis.attr('font', 'italic 20px Arial');
        yAxis.css('font', 'italic 20px Arial');
    });
</script>

It should be noted that using afterMethod and calling SfdcApp.Visualforce.chart.VFChartMgrInst directly is as far as I’m aware undocumented, and therefore unsupported. Visualforce Charting is still in it’s infancy as a feature, so until there is a documented way to do this it’s probably the best you’re going to get.

Attribution
Source : Link , Question Author : Christopher Alun Lewis , Answer Author : Alex Tennant

Leave a Comment