Skip to Content
author's profile photo Former Member
Former Member

InfoChart - unable to swap axis


In the old Chart component there was an option of swapping axis - in the new InfoChart this option is gone and I am unable to swap. I try dragging and dropping and nothing happens. Even if I make changes to my data source it has no effect on the InfoChart - it just doesn't care what's a category, what's a measure always showing one picture.

I desperately need to change colours of my InfoChart's columns, and I am unable to do it either with CSS, or using DS palette.

It seems to be a simple thing - I have three columns in my InfoChart, I want each to be of different colour. I thought, if I swap axis, it will treat them as different series, and let me use the DS palette, but no...

Anyone help please?

Add a comment
10|10000 characters needed characters exceeded

Related questions

10 Answers

  • author's profile photo Former Member
    Former Member
    Posted on Feb 09, 2017 at 12:23 PM

    Thanks Tammy,

    I will have a look at Vidya's idea. Well, the reason to change colour on the chart is that each column shows a completely different category, so it's a bit like comparing apples to oranges if they were in the same colour. My example was simplified, I actually show a few more columns on that chart, that can be divided into three categories. So I need two columns that are red, one column that is green, and five columns that are blue. I want them side by side, possibly with a gap in between, and I need to be able to compare amounts, so a common y axis is a must. If they all were the same colour that just wouldn't make any sense.

    Now, you could show them on three different charts, and I will try that, but the x axis would not be continuous, and I would need to calculate the max for y-axis and apply it to all three charts. The last time I tried to do that, using setAxisMax would reset my entire CSS class for that chart (definitely a bug), although that was in the older version of DS and I didn't have a chance to check in the newest version if the bug still exists.

    So, an answer to your question is simple, there are some cases where you do want to change the colour of the column - it's up to the user/designer and I don't want SAP to be telling me what the "best practice" is (Excel, for that matter, is telling me no such thing and I can do anything I want, and let's keep it that way ;-)), as in many cases best practice just doesn't apply. Another example would be a chart showing 12 months of columns and you want to highlight the most recent month, or any other exception, like values higher than x. There are tons of other scenarios I can think of where I would change column colours (DS, WAD, Excel) and trust me it looks good if not better. I just don't understand why SAP are messing up with their products so much, making chunks of CSS code that worked beautifully in the past, defunct. It took me ages to figure out the right code to do the colour changing in the older version of Chart component, now all this time has just gone to waste and I have to find another way of doing things in InfoChart - when will it end? I know this is not the best place to vent, but there are days that I want to throw my computer out of the window. Lots of bugs in DS to start with, and making users' life even more difficult by removing staff that did actually work. Not cool.

    Add a comment
    10|10000 characters needed characters exceeded

  • Posted on Feb 12, 2017 at 03:54 AM

    Hi Agata,

    There's no need to swap axes to implement separate colours for the infoChart. Taking your 3-column column chart as an example, you can achieve the desired result with CSS as follows:

    1. Specify the following CSS in the custom CSS file attached to your application:

    /* Override infoChart column fill colour for each column */
    /* Add more columns as needed                            */
    /* Column 1 */
    .Col1 g.v-m-main g.v-m-plot g.v-plot-main g.v-datapoint-group .v-datapoint:nth-child(2) rect 
       fill: blue;   
    /* Column 2 */
    .Col2 g.v-m-main g.v-m-plot g.v-plot-main g.v-datapoint-group .v-datapoint:nth-child(3) rect 
       fill: green;   
    /* Column 3 */
    .Col3 g.v-m-main g.v-m-plot g.v-plot-main g.v-datapoint-group .v-datapoint:nth-child(4) rect 
       fill: orange;   

    2. To apply the colours, execute the following script code in the application "On Startup" event or other suitable point:

    INFOCHART_1.setCSSClass("Col1 Col2 Col3");

    3. The colour fills are applied to each column of the chart in sequence, so you need to create a CSS class corresponding to each column you want to override with a different colour instead of the standard colour. You will notice that the column nth-child offset starts from 2 for the first column and increments sequentially after that.

    4. If you need to apply colours for each column based on a calculated condition, then you can create multiple classes for the same column but with different colours and then apply the appropriate CSS class based on script logic.

    Let me know how you go.



    Add a comment
    10|10000 characters needed characters exceeded

  • author's profile photo Former Member
    Former Member
    Posted on Feb 13, 2017 at 10:31 PM

    Hi Agata,

    I have tried to do the following samples using the VisualBi extensions. Hope this will solve your issue

    1. Permanent color assignment to Dimensions

    You will notice that even on filtering, the members of the dimension retain their assigned color

    2. Permanent color assignment to Measures

    As you can see that even after filtering a measure the color assignment for other measures don’t change.

    There is a 15 day free trial available for VBX extensions -



    4.png (11.4 kB)
    3.png (12.1 kB)
    1.png (17.1 kB)
    2.png (14.6 kB)
    5.png (11.2 kB)
    Add a comment
    10|10000 characters needed characters exceeded

  • author's profile photo Former Member
    Former Member
    Posted on Feb 08, 2017 at 06:11 PM

    Yes, I have seen this thread. Although I don't understand what the below means:

    Swap Axis is not a relevant property any more: Since dimensions are assigned directly to chart areas, the chart is not bound to the initial view any more. Moving a dimension from the columns to the rows will have no impact on an Info Chart. To change the look of an Info Chart at runtime, the recommendation is to use the Info Chart Feeding Panel component.

    I have three numbers in my BW query and I want to display them on an InfoChart as columns. Currently, the InfoChart displays three columns of the same, blue colour:

    But I want three different colours. I am not able to do it with CSS - unless someone please share the code with me. I have tried everything. The code that used to work with the old Chart no longer works for InfoChart.

    Second possibility I was thinking about, was to use the colours available in Design Studio, but I can't get them to work because the chart shows me only one series of data and I cannot change it to three series - InfoChart does not respond to anything. I want to see my three numbers not as one series, but as three series.

    The old Chart component can do the following:

    Show as one series in one color:

    Swap axis and show as three different categories with different colours, although it won't show the labels!

    The old Chart is also responsive to the changes I make in the data source, which InfoChart is no longer capable of. I have tried everything on InfoChart, changing data source, dragging and dropping, nothing.

    I know that this is two questions really, but I am only trying to change colours of the columns in the InfoChart.

    I am on the latest version with the latest patch of DS.

    vjh5l.png (2.2 kB)
    cfl3j.png (2.6 kB)
    betoe.png (862 B)
    Add a comment
    10|10000 characters needed characters exceeded

  • Posted on Feb 08, 2017 at 08:38 PM

    You could try using Vidya's idea here

    But a business question for you - why do you want to change bar colors? After the IBCS Open SAP class, such colors are not recommended as part of best practice visualization practice. Also see Ingo's ASUG presentation

    Add a comment
    10|10000 characters needed characters exceeded

  • author's profile photo Former Member
    Former Member
    Posted on Feb 10, 2017 at 11:45 AM

    My InfoChart definitely does not work :-( Pleasy can anyone guide me through the process of swapping measures and dimensions in an InfoChart?

    By default my InfoChart displays data like this (two series, three measures):

    This is not what I want and standard Chart seems to understand that I need this instead (three series and two measures):

    I go into InfoChart configuration and see this:

    I can't change the assignment of Measures and Dimensions whatever I try. Dragging and dropping doesn't work. Rearragning the structure in my data source doesn't help either.

    Please can anyone show me how to swap Measures and Dimensions?

    mmhds.png (5.1 kB)
    qj1k7.png (4.0 kB)
    ypqd4.png (28.9 kB)
    Add a comment
    10|10000 characters needed characters exceeded

  • Posted on Feb 10, 2017 at 11:48 AM

    If it is a hard requirement to swap axes, why not go back and use the CHART component instead of the INFOCHART? There are a lot a posts on how to control the CSS with the CHART component.

    As Etienne stated in his blog you cannot swap axes with the INFOCHART component.

    Add a comment
    10|10000 characters needed characters exceeded

  • Posted on Feb 10, 2017 at 12:52 PM

    OK, I had screen shots but the site ate them up.

    Are you trying to do this?

    1agata3.jpg (61.7 kB)
    2agata.jpg (100.4 kB)
    Add a comment
    10|10000 characters needed characters exceeded

  • Posted on Feb 10, 2017 at 01:09 PM

    OK, I dropped year/quarter

    Changed it to a bar chart (only way I could see changing axis)

    4agata.jpg (113.5 kB)
    Add a comment
    10|10000 characters needed characters exceeded

    • Former Member Tammy Powlas

      Yes, we have spoken to them, but unfortunately not able to use their extension for now.

      Tammy, thank you very much for your help! Seems like we may need to drop DS entirely and move back to WAD, which is such a shame to be doing this for such a trivial reason!

  • Posted on Jan 03, 2018 at 09:03 AM

    Hi Agata,

    I totally agree with you. "Swap Axes" is a much needed feature for me and I don't understand why they abolished it. Thanks a lot for all your research on that.
    I just tried to convert an old waterfall chart to InfoChart/Lumira 2.0. It seems I will have to do a complete redesign of my query and perhaps even data model. Really frustrating, because in this case, it is really complicated.
    To SAP: Bring back the "Swap Axis" function! It will do no good, if I tell my customer that they should change their layout because SAP thinks (without knowing the exact business scenario) it's not best practice.
    I think Agata already described some valid business scenarios. Where ist the point in restricting the customer in such a way?

    Best regards Dominik

    Add a comment
    10|10000 characters needed characters exceeded

Before answering

You should only submit an answer when you are proposing a solution to the poster's problem. If you want the poster to clarify the question or provide more information, please leave a comment instead, requesting additional details. When answering, please include specifics, such as step-by-step instructions, context for the solution, and links to useful resources. Also, please make sure that you answer complies with our Rules of Engagement.
You must be Logged in to submit an answer.

Up to 10 attachments (including images) can be used with a maximum of 1.0 MB each and 10.5 MB total.