context > menu > styling > FAQ

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>ZingSoft Demo</title>

  <script nonce="undefined" src="https://cdn.zingchart.com/zingchart.min.js"></script>
  <style></style>
</head>

<body>
  <div id='myChart'></div>
  <button id='displayContextMenu'>Display Menu</button>
  <script>
    ZC.LICENSE = ["569d52cefae586f634c54f86dc99e6a9", "b55b025e438fa8a98e32482b5f768ff5"];
    var myConfig = {
      gui: {
        contextMenu: {
          backgroundColor: 'none',
          item: {
            backgroundColor: "#009688",
            fontColor: "#FFF",
            hoverState: {
              backgroundColor: "#00BFA5",
              fontColor: "#FFF"
            }
          }
        }
      },
      "graphset": [{
        "type": "scatter",
        "title": {
          "text": "Context Menu Styling"
        },
        "series": [{
            "values": [69, 68, 54, 48, 70, 74, 98, 70, 72, 68, 49, 69],
            "text": "Apple"
          },
          {
            "values": [51, 53, 47, 60, 48, 52, 75, 52, 55, 47, 60, 48],
            "text": "Microsoft"
          },
          {
            "values": [42, 43, 30, 40, 31, 48, 55, 46, 48, 32, 38, 38],
            "text": "Oracle"
          },
          {
            "values": [25, 15, 26, 21, 24, 26, 33, 25, 15, 25, 22, 24],
            "text": "Dell"
          }
        ]
      }]
    };

    zingchart.render({
      id: 'myChart',
      data: myConfig,
      height: 400,
      width: '100%'
    });

    document.getElementById('displayContextMenu').addEventListener('click', function(p) {
      zingchart.exec('myChart', 'showmenu');
    });
  </script>
</body>

</html>

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>ZingSoft Demo</title>

  <script src="https://cdn.zingchart.com/zingchart.min.js"></script>
</head>

<body>
  <div id='myChart'></div>
  <button id='displayContextMenu'>Display Menu</button>
</body>

</html>

var myConfig = {
  gui: {
    contextMenu: {
      backgroundColor: 'none',
      item: {
        backgroundColor: "#009688",
        fontColor: "#FFF",
        hoverState: {
          backgroundColor: "#00BFA5",
          fontColor: "#FFF"
        }
      }
    }
  },
  "graphset": [{
    "type": "scatter",
    "title": {
      "text": "Context Menu Styling"
    },
    "series": [{
        "values": [69, 68, 54, 48, 70, 74, 98, 70, 72, 68, 49, 69],
        "text": "Apple"
      },
      {
        "values": [51, 53, 47, 60, 48, 52, 75, 52, 55, 47, 60, 48],
        "text": "Microsoft"
      },
      {
        "values": [42, 43, 30, 40, 31, 48, 55, 46, 48, 32, 38, 38],
        "text": "Oracle"
      },
      {
        "values": [25, 15, 26, 21, 24, 26, 33, 25, 15, 25, 22, 24],
        "text": "Dell"
      }
    ]
  }]
};

zingchart.render({
  id: 'myChart',
  data: myConfig,
  height: 400,
  width: '100%'
});

document.getElementById('displayContextMenu').addEventListener('click', function(p) {
  zingchart.exec('myChart', 'showmenu');
});