create color coding for line chart based on check box selected...please help!!!

Hello friends, I'm trying to create a dashboard with line chart which happened have a specific color based on a check box selected. It works if the check boxes are selected from left right but if any check box is selected in between, the color code gets messed up. I tried with custom css and nothing worked. Am I missing something? Please see the image below: If I choose the "LBMMC" alone, it takes the color of "MCH" 

My css code look like this:

.mymch g.v-m-main g.v-m-plot g.v-axis1 .v-lines.v-morphable-line:nth-child(4) {Stroke: #0000A0;!important;}

.mylbmmc g.v-m-main g.v-m-plot g.v-axis1 .v-lines.v-morphable-line:nth-child(5) {Stroke: #FF00FF;!important;}

.myocmmc g.v-m-main g.v-m-plot g.v-axis1 .v-lines.v-morphable-line:nth-child(6) {Stroke: #FF8000;!important;}

.mysmmc g.v-m-main g.v-m-plot g.v-axis1 .v-lines.v-morphable-line:nth-child(7) {Stroke: #408080;!important;}

.mychlb g.v-m-main g.v-m-plot g.v-axis1 .v-lines.v-morphable-line:nth-child(8) {Stroke: #8080FF;!important;}

.mymch svg.v-m-tooltip g.v-body path:nth-child(4).tooltipsymbol {fill: #0000A0;!important;}

.mylbmmc svg.v-m-tooltip g.v-body path:nth-child(5).tooltipsymbol {fill: #FF00FF;!important;}

.myocmmc svg.v-m-tooltip g.v-body path:nth-child(6).tooltipsymbol {fill: #FF8000;!important;}

.mysmmc svg.v-m-tooltip g.v-body path:nth-child(7).tooltipsymbol {fill: #408080;!important;}

.mychlb svg.v-m-tooltip g.v-body path:nth-child(8).tooltipsymbol {fill: #8080FF;!important;}