Skip to Content
avatar image
Former Member

Color coding for column combination chart

HI experts,

Need help on color coding for Colum combination chart.

I have Jan to dec in X-axis. and i have yearmonth variable

whenever user selected in variable color should change dynamically for example if he selected May 2015 .so till Apr 2015 bars should be black and remaining bars should be in blue

black bar-Actual

blue bar-Target

Please find the image

I Have tried by capturing variable and apply css.but no luck and i reffered blogs as well but not full filled my requirement

any help would really appreciated.

var month = ["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"];

var a = PAPLS_OVERVIEW.getVariableValueText("PA_V_A_MM_YYYY");

var monthNum = Convert.stringToInt(a.substring(0,3));


COL1 g.v-m-main g.v-m-plot g.v-column:nth-child(1) .v-datapoint.v-morphable-datapoint {fill: red!important; stroke: #E20015;}

css-bars.png (36.5 kB)
Add comment
10|10000 characters needed characters exceeded

  • Get RSS Feed

3 Answers

  • Oct 26, 2016 at 12:48 PM

    The closest, easiest way is to check page 73 of this document: - not sure if it meets your requirement.

    Add comment
    10|10000 characters needed characters exceeded

  • Oct 28, 2016 at 08:35 AM

    Hi varun,

    You cannot pass variables to css. But you can write logic in Formatter Function and use it to change the CSS class for your chart dynamically in Design studio versions 1.5 and above.

    Let us consider your CSS file have classes like

    .month1 .(css class for bar coloring)

    {Code to color first bar bar}

    .month2 .(css class for bar coloring)

    {Code to color bar}

    .month2 .(css class for bar coloring)

    {Code to color second bar bar}

    note: classes are same as you used to color bars in your chart

    you can write formatter function in data binding of CSS class as

    var selected_month = "User selected month";

    if (selected_month = 1)




    if (selected_month = 2)




    So your css class name will change according to the selection of month. For data cell binding you can use any data as we are not going to use in formatter function.

    I think it will solve your problem.



    Add comment
    10|10000 characters needed characters exceeded

  • avatar image
    Former Member
    Oct 30, 2016 at 01:55 PM

    HI Boopalan,

    Thanks for your reply. May i know why used return here?

    shall i use setcssclass or

    i am just confused . i never explored on this .could you please explain in detail please?

    and i Didnt find formatter function any where in my chart.could you please guide me on this

    My requirement

    1. if user selected May so till may color of bars should be back(actuals) and from june to december blue(target)



    Add comment
    10|10000 characters needed characters exceeded

    • Hi Varun,

      Sorry for the delayed reply i didn't get any notification on your comment.

      The return function assigns value to the CSS class property dynamically.

      It's like instead of giving a class name to the property, we can use this method to assign different classes in our css file based on our requirement. Like yours to change color at run time.

      As in my scripting, based on month selected the css class will be assigned the chart. Here the return function sends string(class name) as value of the CSS class name property.

      Let me know if more clarification needed.