ZingChart context menu styles issue

Question

I'm trying to add some css styles to ZingChart context menu, but default inline styles override them. Is it possible to clear all styles for context menu?

Answer 1

There is currently no way to clear the styles. You can adjust them with our JSON syntax. If you need to use CSS. Just use the most popular stackoverflow answer... !important

.zc-menu.zc-style {
  background:red !important;
}

Demo of adjusting context menu styles

var myTheme = {
  palette:{
    line:[
        ['#FBFCFE', '#00BAF2', '#00BAF2', '#00a7d9'], /* light blue */
        ['#FBFCFE', '#E80C60', '#E80C60', '#d00a56'], /* light pink */
        ['#FBFCFE', '#9B26AF', '#9B26AF', '#8b229d'], /* light purple */
        ['#FBFCFE', '#E2D51A', '#E2D51A', '#E2D51A'], /* med yellow */
        ['#FBFCFE', '#FB301E', '#FB301E', '#e12b1b'], /* med red */
        ['#FBFCFE', '#00AE4D', '#00AE4D', '#00AE4D'], /* med green */
    ]
  },
  graph:{
    backgroundColor:'#FBFCFE',
   	title: {
   	  fontFamily: 'Lato',
   	  fontSize: 14,
   	  // border: "1px solid black",
   	  padding: "15",
   	  fontColor : "#1E5D9E",
   	  adjustLayout:true
   	},
   	subtitle: {
   	  fontFamily: 'Lato',
   	  fontSize: 12,
   	  fontColor: "#777",
   	  padding: "5"
   	},
   	plot: {
   	  backgroundColor:'#FBFCFE',
   	  marker: {
   	    size: 4
   	  }
   	},
   tooltip : {
        visible:true,
        text: "%kl<br><span style='color:%color'>%t: </span>%v<br>",
        backgroundColor : "white",
        borderColor : "#e3e3e3",
        borderRadius : "5px",
        bold : true,
        fontSize : "12px",
        fontColor : "#2f2f2f",
        textAlign : 'left',
        padding : '15px',
        shadow : true,
        shadowAlpha : 0.2,
        shadowBlur : 5,
        shadowDistance : 4,
        shadowColor : "#a1a1a1"
    },
   	plotarea: {
   	  backgroundColor: 'transparent',
   	  borderRadius: "0 0 0 10",
   	  borderRight: "0px",
   	  borderTop: "0px",
   	  margin:"dynamic",
   	  borderLeft:'1px solid #1E5D9E',
   	  borderBottom:'1px solid #1E5D9E',
   	},
  	scaleX: {
   	  zooming:true,
   	  offsetY: -20,
   	  lineWidth: 0,
   	  padding: 20,
   	  margin: 20,
   	  label:{
   	    text:"Scale-X"
   	  },
   	  item: {
   	    padding: 5,
   	    fontColor : "#1E5D9E",
   	    fontFamily: 'Montserrat',
     	  rules: [
     	    {
     	      rule: "%i == 0",
     	      visible: false
     	    }
     	  ]
   	  },
   	  tick: {
   	    lineColor: '#D1D3D4',
     	  rules: [
     	    {
     	      rule: "%i == 0",
     	      visible: false
     	    }
     	  ]
   	  },
   	  guide: {
   	    visible: true,
     	  lineColor : '#D7D8D9',
     	  lineStyle: 'dotted',
     	  lineGapSize: '4px',
     	  rules: [
     	    {
     	      rule: "%i == 0",
     	      visible: false
     	    }
     	  ]
   	  }
   	},
   	scaleY: {
   	  zooming:true,
   	  lineWidth: 0,
   	  label:{
   	    text:"Scale-Y"
   	  },
   	  item: {
   	    padding: "0 10 0 0",
   	    fontColor : "#1E5D9E",
   	    fontFamily: 'Montserrat',
     	  rules: [
     	    {
     	      rule: "%i == 0",
     	      offsetX:10,
     	      offsetY:10,
     	      backgroundColor:'none'
     	    }
     	  ]
   	  },
   	  tick: {
   	    lineColor: '#D1D3D4',
     	  rules: [
     	    {
     	      rule: "%i == 0",
     	      visible:false
     	    }
     	  ]
   	  },
   	  guide: {
   	    visible: true,
     	  lineColor : '#D7D8D9',
     	  lineStyle: 'dotted',
     	  lineGapSize: '4px',
     	  rules: [
     	    {
     	      rule: "%i == 0",
     	      visible: false
     	    }
     	  ]
   	  }
   	},
   	scrollX:{
   	  bar:{
   	    backgroundColor:'none',
  	    borderLeft:'none',
   	    borderTop:'none',
   	    borderBottom:'none'
   	  },
   	  handle:{
   	    backgroundColor:'#1E5D9E',
   	    height:5
   	  }
   	},
   	scrollY:{
   	  borderWidth:0,
   	  bar:{
   	    backgroundColor:'none',
   	    width:14,
   	    borderLeft:'none',
   	    borderTop:'none',
   	    borderBottom:'none'
   	  },
   	  handle:{
   	    borderWidth:0,
   	    backgroundColor:'#1E5D9E',
   	    width:5
   	  }
   	},
   	zoom:{
   	  backgroundColor:'#1E5D9E',
   	  alpha:.33,
   	  borderColor:'#000',
   	  borderWidth:1
   	},
   	preview:{
   	  borderColor:'#1E5D9E',
   	  borderWidth:1,
   	  adjustLayout:true,
   	  handle:{
   	    backgroundColor:'#1E5D9E',
   	    borderColor:'#1E5D9E'
   	  },
   	  mask:{
   	    backgroundColor:'#FFF',
   	    alpha:.95,
   	  }
   	}
  }
};
 
var myConfig = {
 	type: "line",
 	title: {
 	  text: "Average requests Per Minute",
 	},
 	subtitle: {
 	  text: "06/10/16 - 06/23/16",
 	},
 	plotarea: {
 	  marginTop:10,
 	  marginBottom:80
 	},
	scaleX: {
 	  zooming:true,
 	  labels:['6/10','6/11','6/12','6/13','6/14','6/15','6/16','6/17','6/18','6/19','6/20','6/21','6/22','6/23']
 	},
 	scaleY: {
 	  zooming:true,
 	},
 	preview:{},
 	scrollX:{},
 	scrollY:{},
	series : [
		{
		  text: "Internal",
			values : [6,6,3.5, 4.5, 4.5, 4.5, 2.5, 4.5, 4.5, 5, 5, 4, 5, 5],
		},
		{
		  text: "External",
			values : [4.5, 4.5, 3.5, 3.5, 3.5, 2.5, 3.5, 3.5, 2.5, 2.5, 2, 3, 3, 2],
		},
		{
		  text: "Outbound",
			values : [2.5, 1.5, 1.5, 2.5, 1.5, 1.5, 1.5, 1, 1, 1, 1, 2, 2, 3],
		}
	]
};
 
zingchart.render({ 
	id : 'myChart', 
  data: {
    gui:{
      contextMenu:{
        button:{
          visible: true,
          lineColor: "#2D66A4",
          backgroundColor: "#2D66A4"
        },
        gear: {
          alpha: 1,
          backgroundColor: "#2D66A4"
        },
        position: "right",
        backgroundColor:"#306EAA", /*sets background for entire contextMenu*/
        docked: true, 
        item:{
          backgroundColor:"#306EAA",
          borderColor:"#306EAA",
          borderWidth: 0,
          fontFamily: "Lato",
          color:"#fff"
        }
      }
    },
    graphset:[myConfig]
  },
	height: 390, 
	width: '100%',
	defaults: myTheme
});

<!DOCTYPE html>
<html>
	<head>
		<script src= "https://cdn.zingchart.com/zingchart.min.js"></script></head>
	<body>
	  <section>
		  <div id='myChart'></div>
		</section>
	</body>
</html>