Skip to Content
0

Infochart CSS for legend

Feb 15, 2017 at 10:14 AM

185

avatar image
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

10 |10000 characters needed characters left characters exceeded
* Please Login or Register to Answer, Follow or Comment.

1 Answer

avatar image
Former Member Feb 15, 2017 at 12:05 PM
0

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;}

Share
10 |10000 characters needed characters left characters exceeded