Skip to Content

Design Studio Infochart column css

Hi,

I have a Design Studio Infochart with 2 Key Figure column groups. I am trying to change colour of 1st group to blue and second to red with CSS. However one column (the one with value 740) is coloured with red.

In the CSS file I put some CSS:

.chartColumn1 g.v-m-main g.v-m-plot g.v-plot-main g.v-datapoint-group g:nth-of-type(1) rect  {
   fill: blue;
} .chartColumn1 g.v-m-main g.v-m-plot g.v-plot-main g.v-datapoint-group g:nth-of-type(2) rect  {
   fill: red;
}

As you can see from attached CSS extract for Infochart object key figure objects are coming in <g> groups.

The idea is that CSS should colour first group objects with blue color and second one should be red. It seems to work this way however one rect element seems to be red.

Do you guys have any idea what could be the issue here?

Thanks.

chart.png (12.8 kB)
zz.png (36.3 kB)
Add comment
10|10000 characters needed characters exceeded

  • Get RSS Feed

2 Answers

  • Best Answer
    Dec 20, 2017 at 01:27 PM

    You can use following css:

    .myChart .v-datapoint-group>g:nth-child(1)>g>rect{
        fill: blue;
    }
    
    .myChart .v-datapoint-group>g:nth-child(2)>g>rect{
        fill: red;
    }

    But again same question: why css when you can define the colors in the property sheet in an easier way? Do you want to change the colors dynamically in script ?

    Add comment
    10|10000 characters needed characters exceeded

  • Dec 20, 2017 at 01:24 PM

    Hi - why use CSS? Why not configure the color palette under additional properties for the data series as follows:

    Add comment
    10|10000 characters needed characters exceeded