Skip to Content
0

Design Studio Infochart column css

Dec 20, 2017 at 11:47 AM

42

avatar image

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)
10 |10000 characters needed characters left characters exceeded
* Please Login or Register to Answer, Follow or Comment.

2 Answers

Best Answer
Arijit Das Dec 20, 2017 at 01:27 PM
0

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 ?

Show 1 Share
10 |10000 characters needed characters left characters exceeded

Thanks!

I am aware that I can specify colours in the property panel, however I would like to change them dynamically.

0
Tammy Powlas
Dec 20, 2017 at 01:24 PM
0

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


whycss.jpg (100.7 kB)
Show 1 Share
10 |10000 characters needed characters left characters exceeded

Hi, in this case colors will be hardcoded. You will not have possibility to change them dynamically when needed from DS Script.

0