Skip to Content

CSS Column Chart 2 measure values

Hi,

I am trying to overwrite default color of Column-bars using css. Chart with a single measure value is working for me using below css.

.set1 g.v-m-main g.v-m-plot g.v-plot-main g.v-datapoint-group .v-datapoint:nth-child(2) rect {fill: black;}

Now, i have a chart with 2 measure value and the above code is impacting both the measure bar as i believe i'm not refining measure 'child' value. I want to handle both measures independently with css.

After debugging using F12 i kind of ran into a wall. I did found related post but still no luck.

PFA. bar-chart-2measure.png

Appreciate you advice.

Regards,

Fahad

Add comment
10|10000 characters needed characters exceeded

  • Get RSS Feed

1 Answer

  • Best Answer
    Mar 06 at 06:20 AM

    Can you try this way:

    .myChart .v-datapoint-group>g:nth-child(1)>g>rect{
    	fill: black;
    }
    .myChart .v-datapoint-group>g:nth-child(2)>g>rect{
    	fill: white;
    }
    .myChart .viz-legend-valueLabel>g:nth-child(1)>path{
    	fill: black;
    }
    .myChart .viz-legend-valueLabel>g:nth-child(2)>path{
    	fill: white;
    }
    
    Add comment
    10|10000 characters needed characters exceeded