<apex:lineSeries axis="left" xField="Month" yField="Score" markerType="circle" markerSize="4" markerFill="MarkerColour" />

I am using a formula field to store colour code in a formula field and passing as a parameter in constructor . And trying to use it in the VF Line Series.

It's not coming out correctly however . Any help?

VF :

<apex:outputPanel id="myChart">
  <apex:chart data="{!MethodName}" height="200" width="90%" background="#FFFFFF">
    <apex:legend position="top"/>
     <apex:axis type="Numeric" position="left" grid="false" fields="Turnover" dashSize="2">
  <apex:chartLabel />
       <apex:axis type="Category" position="bottom" fields="InteractionClosedYearMonth" >
          <apex:chartLabel rotate="315"/>

 <apex:lineSeries axis="left" xField="InteractionClosedYearMonth" yField="Turnover" markerType="circle" markerSize="4" markerFill="MarkerColour" />


Controller Method :

public class ABCD 
    public String MarkerColour {get; private set;}

    public ABCD(String MarkerColour)
        this.MarkerColour = MarkerColour;


public List<ABCD> getABCD()
    List<CustomObject__c> List1= [select MarkerColour__c  from CustomObject__c where Account__c ='id' ];

    List<ABCD> List2 = new List<ABCD>();
            Map<Id,Decimal> Map1 = new Map<Id,Decimal>();

    if(List1.size()> 0)
        for(CustomObject__c cc: List1)
            //Some code            }

        for(CustomObject__c : List1)
            for(Id Id1: Map1.keySet())
                if(Id1 == cc.Id1){
                    List2.add(new ABCD(String.ValueOf(cc.MarkerColour__c)));
            return List2; 


To display multiple colours markers within apex:chart, JavaScript could be utilized.

If we inspect marker element, we could find that its id starts with vfext4-ext-sprite-1078 and nodeName is circle. Using this knowledge, we can parse page for markers and replace colour.

Let's assume that we have custom field colour__c on Opportunity:


public class ChartController {
public static list<Data> data {get; private set;}
public static String jColour {get; private set;}
public ChartController() {
    data = new List<Data>();
    List<string> colours = new List<string>();
    for (opportunity opp :[ select closedate, amount, colour__c
                            from opportunity order by closedate desc limit 10]) {
        data.add(new Data(opp.closedate.format(), opp.amount));
    jColour = json.serialize (colours);
public class Data {
    public String name { get; set; }
    public decimal data1 { get; set; }
    public Data(String name, decimal data1) {
        this.name = name;
        this.data1 = data1;
}   }   }


<apex:page controller="ChartController">
<script type='text/javascript'>
window.setTimeout(function() {
    var Colours = {!jColour}; //Bind controller property
    nodes = document.querySelectorAll('[id^="vfext4-ext-sprite-"]');
    var markers = [];
    for(i in nodes) {   //collect markers
        if (nodes[i].nodeName == "circle") {
    }   }
    for(i in markers) {
        if (Colours[i]) {   //leave default if colour not specified
            markers[i].outerHTML = markers[i].outerHTML.replace
    }   }
},1500);  //apex:lineSeries requires some time to place markers
<apex:chart height="400" width="700" data="{!data}">
    <apex:axis type="Numeric" position="left" fields="data1" title="Amount" grid="true"/>
    <apex:axis type="Category" position="bottom" fields="name" title="Date">
      <apex:chartLabel rotate="315"/> </apex:axis>
    <apex:lineSeries axis="left" xField="name" yField="data1"
                     markerType="circle" markerSize="5" markerFill="red" id="mychart"/>


Colourful markers

I've added setTimeout, page needs some time to render markers correctly, if you want to use it in production, I would recommend to use external JS library.

  • Your answer was informative . But I guess it won't be suitable in case I want particular colour based on a field value in the record? – SFDCRookie May 25 '16 at 5:31
  • You can define colour__c as formula, e.g. IF(Amount>25000,"Blue",IF(Amount<20000,"#D4AF37","DarkTurquoise")) – Ilya Lepesh May 25 '16 at 5:42
  • or case: CASE(StageName, "Prospecting", "DarkOrange", "Qualification", "DarkOrchid","HotPink") – Ilya Lepesh May 25 '16 at 5:43
  • I have created my formula field that way itself . But not really sure how to use that formula field in the code . can you please take a look at my code and give an idea? – SFDCRookie May 25 '16 at 6:45
  • apex:lineseries doesn't allow to specify markerfill dynamically. Please feel free to use my example, just change opportunity to your object. – Ilya Lepesh May 25 '16 at 20:03

If you want to merge in the value of a custom field, it should look like:

<apex:page standardController="MyObject__c">
    <apex:lineSeries ... markerFill="{!MyObject__c.MarkerColour__c}" />

You can also merge it in from a property on a controller extension or custom controller.

public String markerColour { get; private set; }

<apex:lineSeries markerFill="{!markerColour}" />
  • I am returning a List and displaying . That way I don't think it will be possible to update markerFill ? – SFDCRookie May 26 '16 at 6:08

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.