Infochart CSS for legend

[Former Member]

Hi Experts,

I am using a infochart stack chart with 4 series. I need to dynamically select series using checkbox. Each series should have a specific color.

I am able make css so series color is reflected correctly with below css

.custom1 g.v-m-main g.v-m-plot g.v-plot-main g.v-datapoint-group g.v-stack g.v-datapoint:nth-child(1) rect {fill: #008000;}

.custom1 g.v-m-main g.v-m-plot g.v-plot-main g.v-datapoint-group g.v-stack g.v-datapoint:nth-child(2) rect {fill: #FC3503;}

But I am not able to figure out css for legend.

I have been trying with

.custom1 g.v-m-legendGroup g.v-m-legend g.v-content g.v-groups v-label viz-legend-valueLabel g.v-legend-element v-legend-item g.v-legend-marker {fill: #008000;}

also tried another css but it changes all legend to same color.

.custom1 .v-legend-marker[fill='#0080FF']{ fill:blue; }

Please help with the right syntax.

Regards,

Chetan

[Former Member]

Finally figured out how to make it work. Though noticed that the nth-child order is not same for legend and series.

.custom1 g.v-m-main g.v-m-plot g.v-plot-main g.v-datapoint-group g.v-stack g.v-datapoint:nth-child(2) rect {fill: #0080FF;}

.custom1

g.v-m-main g.v-m-plot g.v-plot-main g.v-datapoint-group g.v-stack g.v-datapoint:nth-child(1) rect {fill: #008000;}

.custom1

g.v-m-legendGroup g.v-m-legend g.v-content g.v-groups.v-label.viz-legend-valueLabel g.v-legend-element.v-legend-item:nth-child(1) path.v-legend-marker {fill: #0080FF;}

.custom1

g.v-m-legendGroup g.v-m-legend g.v-content g.v-groups.v-label.viz-legend-valueLabel g.v-legend-element.v-legend-item:nth-child(2) path.v-legend-marker {fill: #008000;}