• Edit
  • Download
  • <!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>
        html,
        body,
        #myChart {
          height: 100%;
          width: 100%;
        }
      </style>
    </head>
    
    <body>
      <div id='myChart'></div>
      <script>
        ZC.LICENSE = ["569d52cefae586f634c54f86dc99e6a9", "b55b025e438fa8a98e32482b5f768ff5"];
        var myConfig = {
          "graphset": [{
              "background-color": "#fff",
              "type": "bar",
              "height": "50%",
              "width": "100%",
              "x": 0,
              "y": 0,
              "shapes": [{
                  "type": "circle",
                  "id": "stack",
                  "name": "stack",
                  "size": 5,
                  "border-width": 2,
                  "background-color": "black",
                  "x": 100,
                  "y": 25,
                  "cursor": "pointer",
                  "label": {
                    "text": "Stacked",
                    "offset-x": 30
                  },
                },
                {
                  "type": "circle",
                  "id": "group",
                  "name": "group",
                  "size": 5,
                  "border-width": 2,
                  "background-color": "white",
                  "cursor": "pointer",
                  "x": 200,
                  "y": 25,
                  "label": {
                    "text": "Grouped",
                    "offset-x": 30
                  }
                }
              ],
              "legend": {
                "shared": true,
                "toggle-action": "remove",
                "layout": "x3",
                "x": "55%",
                "background-color": "none",
                "border-width": 0,
                "marker": {
                  "type": "circle",
                  "border-width": 0
                }
              },
              "plotarea": {
                "margin": "50px 60px 30px 60px"
              },
              "plot": {
                "stacked": true,
                "mask-tolerance": [0, 0] // helps hide bar when zooming and have value below scale
              },
              "scale-x": {
                "line-color": "#555",
                "line-width": 1,
                "max-labels": 6,
                "zooming": true,
                "tick": {
                  "line-color": "none"
                },
                "guide": {
                  "line-style": "solid"
                }
              },
              "zoom": {
                "shared": true
              },
              "scale-y": {
                "line-width": 1,
                "zooming": true,
                "line-color": "#555",
                "step": 0.5,
                "tick": {
                  "line-color": "none"
                },
                "guide": {
                  "line-style": "solid"
                }
              },
              "tooltip": {
                "text": "%v on %i"
              },
              "series": [{
                  "background-color": "#5698c6",
                  "hover-state": {
                    "background-color": "#000"
                  },
                  "values": [1.7, 2.2, 2.4, 2.6, 2.5, 2.3, 1.7, 1.2, 0.7, 0.4, 0.3, 0.3, 0.2, 0.25, 0.1, 0.2, 0.1, 0.3, 0.25, 0.15, 0.2, 0.3, 0.25, 0.15, 0.2, 0.2, 0.25, 0.3, 0.15, 0.2, 0.3, 0.5, 0.8, 1.3, 1.45, 2.2, 2.8, 2.9, 3.2, 2.4, 1.3, 0.7, 0.3, 0.15, 0.1, 0.25, 0.3, 0.25, 0.35, 0.5, 0.6, 0.7, 0.65, 0.6, 0.5, 0.45, 0.4, 0.35, 0.37, 0.3],
                  "legend-text": "Stream 1",
                  "visible": true
                },
                {
                  "values": [0.2, 0.2, 0.4, 1.4, 3.4, 4.2, 5.1, 4.4, 3.7, 1.2, 0.3, 0.2, 0.2, 0.2, 0.2, 0.2, 0.1, 0.4, 0.3, 0.25, 0.3, 0.35, 0.2, 0.15, 0.1, 0.07, 0.2, 0.32, 0.27, 0.12, 0.28, 0.32, 0.38, 0.4, 0.44, 0.3, 0.2, 0.15, 0.1, 0.175, 0.2, 0.24, 0.2, 0.3, 0.35, 0.3, 0.2, 0.15, 0.5, 0.6, 0.75, 1, 1.3, 0.7, 0.85, 0.8, 0.7, 0.55, 0.45, 0.26],
                  "text": "Stream 2",
                  "background-color": "#FE9E49",
                  "hover-state": {
                    "background-color": "#000"
                  },
                  "visible": true
                },
                {
                  "values": [3, 2.5, 1.7, 1.1, 0.8, 0.9, 0.9, 0.7, 0.8, 0.85, 1, 0.7, 0.5, 0.4, 0.3, 0.25, 0.15, 0.2, 0.2, 0.1, 0.25, 0.15, 0.2, 0.35, 0.1, 0.07, 0.2, 0.3, 0.25, 0.2, 0.2, 0.22, 0.25, 0.4, 0.45, 0.5, 0.7, 0.65, 0.51, 0.375, 0.2, 0.24, 0.2, 0.3, 0.35, 0.3, 0.2, 0.15, 0.5, 1.2, 1.7, 2, 2.3, 2.1, 1.7, 1.3, 1, 0.7, 0.35, 0.2],
                  "text": "Stream 3",
                  "background-color": "#C1D4ED",
                  "hover-state": {
                    "background-color": "#000"
                  }
                }
              ]
            },
            {
              "type": "area",
              "height": "25%",
              "y": "50%",
              "width": "100%",
              "x": 0,
              "background-color": "#fff",
              "legend": {
                "shared": true,
                "visible": false,
                "toggle-action": "remove"
              },
              "plotarea": {
                "margin": "20px 60px"
              },
              "plot": {
                "stacked": true,
                "alpha-area": 1,
                "line-width": 0,
                "marker": {
                  "visible": false
                },
                "active-area": true,
                "hover-state": {
                  "background-color": "black"
                }
              },
              "scale-x": {
                "line-color": "#555",
                "line-width": 1,
                "values": "1:60",
                "max-labels": 6,
                "zooming": true,
                "tick": {
                  "line-color": "none"
                },
                "guide": {
                  "line-style": "solid"
                }
              },
              "zoom": {
                "shared": true
              },
              "scale-y": {
                "zooming": true,
                "line-color": "#555",
                "line-width": 1,
                "tick": {
                  "line-color": "none"
                },
                "guide": {
                  "line-style": "solid"
                }
              },
              "series": [{
                  "values": [1.7, 2.2, 2.4, 2.6, 2.5, 2.3, 1.7, 1.2, 0.7, 0.4, 0.3, 0.3, 0.2, 0.25, 0.1, 0.2, 0.1, 0.3, 0.25, 0.15, 0.2, 0.3, 0.25, 0.15, 0.2, 0.2, 0.25, 0.3, 0.15, 0.2, 0.3, 0.5, 0.8, 1.3, 1.45, 2.2, 2.8, 2.9, 3.2, 2.4, 1.3, 0.7, 0.3, 0.15, 0.1, 0.25, 0.3, 0.25, 0.35, 0.5, 0.6, 0.7, 0.65, 0.6, 0.5, 0.45, 0.4, 0.35, 0.37, 0.3],
                  "background-color": "#5698c6",
                  "line-color": "#5698c6"
                },
                {
                  "values": [0.2, 0.2, 0.4, 1.4, 3.4, 4.2, 5.1, 4.4, 3.7, 1.2, 0.3, 0.2, 0.2, 0.2, 0.2, 0.2, 0.1, 0.4, 0.3, 0.25, 0.3, 0.35, 0.2, 0.15, 0.1, 0.07, 0.2, 0.32, 0.27, 0.12, 0.28, 0.32, 0.38, 0.4, 0.44, 0.3, 0.2, 0.15, 0.1, 0.175, 0.2, 0.24, 0.2, 0.3, 0.35, 0.3, 0.2, 0.15, 0.5, 0.6, 0.75, 1, 1.3, 0.7, 0.85, 0.8, 0.7, 0.55, 0.45, 0.26],
                  "background-color": "#FE9E49",
                  "line-color": "#FE9E49"
                },
                {
                  "values": [3, 2.5, 1.7, 1.1, 0.8, 0.9, 0.9, 0.7, 0.8, 0.85, 1, 0.7, 0.5, 0.4, 0.3, 0.25, 0.15, 0.2, 0.2, 0.1, 0.25, 0.15, 0.2, 0.35, 0.1, 0.07, 0.2, 0.3, 0.25, 0.2, 0.2, 0.22, 0.25, 0.4, 0.45, 0.5, 0.7, 0.65, 0.51, 0.375, 0.2, 0.24, 0.2, 0.3, 0.35, 0.3, 0.2, 0.15, 0.5, 1.2, 1.7, 2, 2.3, 2.1, 1.7, 1.3, 1, 0.7, 0.35, 0.2],
                  "background-color": "#C1D4ED",
                  "line-color": "#C1D4ED"
                }
              ]
            },
            {
              "type": "line",
              "height": "25%",
              "y": "75%",
              "width": "100%",
              "x": 0,
              "background-color": "#fff",
              "legend": {
                "shared": true,
                "visible": false,
                "toggle-action": "remove"
              },
              "plotarea": {
                "margin": "20px 60px 30px 60px"
              },
              "plot": {
                "line-width": 2,
                "marker": {
                  "size": 0,
                  "border-width": 0
                },
                "hover-marker": {
                  "size": 5,
                  "background-color": "black"
                }
              },
              "scale-x": {
                "line-color": "#555",
                "line-width": 1,
                "values": "1:60",
                "max-labels": 6,
                "zooming": true,
                "tick": {
                  "line-color": "none"
                },
                "guide": {
                  "line-style": "solid"
                }
              },
              "scale-y": {
                "zooming": true,
                "line-color": "#555",
                "line-width": 1,
                "tick": {
                  "line-color": "none"
                },
                "guide": {
                  "line-style": "solid"
                }
              },
              "zoom": {
                "shared": true
              },
              "series": [{
                  "values": [1.7, 2.2, 2.4, 2.6, 2.5, 2.3, 1.7, 1.2, 0.7, 0.4, 0.3, 0.3, 0.2, 0.25, 0.1, 0.2, 0.1, 0.3, 0.25, 0.15, 0.2, 0.3, 0.25, 0.15, 0.2, 0.2, 0.25, 0.3, 0.15, 0.2, 0.3, 0.5, 0.8, 1.3, 1.45, 2.2, 2.8, 2.9, 3.2, 2.4, 1.3, 0.7, 0.3, 0.15, 0.1, 0.25, 0.3, 0.25, 0.35, 0.5, 0.6, 0.7, 0.65, 0.6, 0.5, 0.45, 0.4, 0.35, 0.37, 0.3],
                  "line-color": "#5698c6",
                  "marker": {
                    "background-color": "#5698c6",
                  }
                },
                {
                  "values": [0.2, 0.2, 0.4, 1.4, 3.4, 4.2, 5.1, 4.4, 3.7, 1.2, 0.3, 0.2, 0.2, 0.2, 0.2, 0.2, 0.1, 0.4, 0.3, 0.25, 0.3, 0.35, 0.2, 0.15, 0.1, 0.07, 0.2, 0.32, 0.27, 0.12, 0.28, 0.32, 0.38, 0.4, 0.44, 0.3, 0.2, 0.15, 0.1, 0.175, 0.2, 0.24, 0.2, 0.3, 0.35, 0.3, 0.2, 0.15, 0.5, 0.6, 0.75, 1, 1.3, 0.7, 0.85, 0.8, 0.7, 0.55, 0.45, 0.26],
                  "line-color": "#FE9E49",
                  "marker": {
                    "background-color": "#FE9E49",
                  }
                },
                {
                  "values": [3, 2.5, 1.7, 1.1, 0.8, 0.9, 0.9, 0.7, 0.8, 0.85, 1, 0.7, 0.5, 0.4, 0.3, 0.25, 0.15, 0.2, 0.2, 0.1, 0.25, 0.15, 0.2, 0.35, 0.1, 0.07, 0.2, 0.3, 0.25, 0.2, 0.2, 0.22, 0.25, 0.4, 0.45, 0.5, 0.7, 0.65, 0.51, 0.375, 0.2, 0.24, 0.2, 0.3, 0.35, 0.3, 0.2, 0.15, 0.5, 1.2, 1.7, 2, 2.3, 2.1, 1.7, 1.3, 1, 0.7, 0.35, 0.2],
                  "line-color": "#C1D4ED",
                  "marker": {
                    "background-color": "#C1D4ED",
                  }
                }
              ]
            }
          ]
        };
    
        function toggleCharts(e) {
          // just referencing original config. You can get chart info as well
    
          if (e.shapeid === 'stack') {
            myConfig.graphset[0].plot.stacked = true;
            myConfig.graphset[1].plot.stacked = true;
            myConfig.graphset[0].shapes[0]['background-color'] = 'black';
            myConfig.graphset[0].shapes[1]['background-color'] = 'white';
          } else if (e.shapeid === 'group') {
            myConfig.graphset[0].plot.stacked = false;
            myConfig.graphset[1].plot.stacked = false;
            myConfig.graphset[0].shapes[0]['background-color'] = 'white';
            myConfig.graphset[0].shapes[1]['background-color'] = 'black';
          }
    
          zingchart.exec('myChart', 'setdata', {
            data: myConfig
          });
        }
    
        zingchart.bind('myChart', 'shape_click', toggleCharts);
    
        zingchart.render({
          id: 'myChart',
          data: myConfig,
          height: "100%",
          width: "100%"
        });
      </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>
    </body>
    
    </html>
    html,
    body,
    #myChart {
      height: 100%;
      width: 100%;
    }
    var myConfig = {
      "graphset": [{
          "background-color": "#fff",
          "type": "bar",
          "height": "50%",
          "width": "100%",
          "x": 0,
          "y": 0,
          "shapes": [{
              "type": "circle",
              "id": "stack",
              "name": "stack",
              "size": 5,
              "border-width": 2,
              "background-color": "black",
              "x": 100,
              "y": 25,
              "cursor": "pointer",
              "label": {
                "text": "Stacked",
                "offset-x": 30
              },
            },
            {
              "type": "circle",
              "id": "group",
              "name": "group",
              "size": 5,
              "border-width": 2,
              "background-color": "white",
              "cursor": "pointer",
              "x": 200,
              "y": 25,
              "label": {
                "text": "Grouped",
                "offset-x": 30
              }
            }
          ],
          "legend": {
            "shared": true,
            "toggle-action": "remove",
            "layout": "x3",
            "x": "55%",
            "background-color": "none",
            "border-width": 0,
            "marker": {
              "type": "circle",
              "border-width": 0
            }
          },
          "plotarea": {
            "margin": "50px 60px 30px 60px"
          },
          "plot": {
            "stacked": true,
            "mask-tolerance": [0, 0] // helps hide bar when zooming and have value below scale
          },
          "scale-x": {
            "line-color": "#555",
            "line-width": 1,
            "max-labels": 6,
            "zooming": true,
            "tick": {
              "line-color": "none"
            },
            "guide": {
              "line-style": "solid"
            }
          },
          "zoom": {
            "shared": true
          },
          "scale-y": {
            "line-width": 1,
            "zooming": true,
            "line-color": "#555",
            "step": 0.5,
            "tick": {
              "line-color": "none"
            },
            "guide": {
              "line-style": "solid"
            }
          },
          "tooltip": {
            "text": "%v on %i"
          },
          "series": [{
              "background-color": "#5698c6",
              "hover-state": {
                "background-color": "#000"
              },
              "values": [1.7, 2.2, 2.4, 2.6, 2.5, 2.3, 1.7, 1.2, 0.7, 0.4, 0.3, 0.3, 0.2, 0.25, 0.1, 0.2, 0.1, 0.3, 0.25, 0.15, 0.2, 0.3, 0.25, 0.15, 0.2, 0.2, 0.25, 0.3, 0.15, 0.2, 0.3, 0.5, 0.8, 1.3, 1.45, 2.2, 2.8, 2.9, 3.2, 2.4, 1.3, 0.7, 0.3, 0.15, 0.1, 0.25, 0.3, 0.25, 0.35, 0.5, 0.6, 0.7, 0.65, 0.6, 0.5, 0.45, 0.4, 0.35, 0.37, 0.3],
              "legend-text": "Stream 1",
              "visible": true
            },
            {
              "values": [0.2, 0.2, 0.4, 1.4, 3.4, 4.2, 5.1, 4.4, 3.7, 1.2, 0.3, 0.2, 0.2, 0.2, 0.2, 0.2, 0.1, 0.4, 0.3, 0.25, 0.3, 0.35, 0.2, 0.15, 0.1, 0.07, 0.2, 0.32, 0.27, 0.12, 0.28, 0.32, 0.38, 0.4, 0.44, 0.3, 0.2, 0.15, 0.1, 0.175, 0.2, 0.24, 0.2, 0.3, 0.35, 0.3, 0.2, 0.15, 0.5, 0.6, 0.75, 1, 1.3, 0.7, 0.85, 0.8, 0.7, 0.55, 0.45, 0.26],
              "text": "Stream 2",
              "background-color": "#FE9E49",
              "hover-state": {
                "background-color": "#000"
              },
              "visible": true
            },
            {
              "values": [3, 2.5, 1.7, 1.1, 0.8, 0.9, 0.9, 0.7, 0.8, 0.85, 1, 0.7, 0.5, 0.4, 0.3, 0.25, 0.15, 0.2, 0.2, 0.1, 0.25, 0.15, 0.2, 0.35, 0.1, 0.07, 0.2, 0.3, 0.25, 0.2, 0.2, 0.22, 0.25, 0.4, 0.45, 0.5, 0.7, 0.65, 0.51, 0.375, 0.2, 0.24, 0.2, 0.3, 0.35, 0.3, 0.2, 0.15, 0.5, 1.2, 1.7, 2, 2.3, 2.1, 1.7, 1.3, 1, 0.7, 0.35, 0.2],
              "text": "Stream 3",
              "background-color": "#C1D4ED",
              "hover-state": {
                "background-color": "#000"
              }
            }
          ]
        },
        {
          "type": "area",
          "height": "25%",
          "y": "50%",
          "width": "100%",
          "x": 0,
          "background-color": "#fff",
          "legend": {
            "shared": true,
            "visible": false,
            "toggle-action": "remove"
          },
          "plotarea": {
            "margin": "20px 60px"
          },
          "plot": {
            "stacked": true,
            "alpha-area": 1,
            "line-width": 0,
            "marker": {
              "visible": false
            },
            "active-area": true,
            "hover-state": {
              "background-color": "black"
            }
          },
          "scale-x": {
            "line-color": "#555",
            "line-width": 1,
            "values": "1:60",
            "max-labels": 6,
            "zooming": true,
            "tick": {
              "line-color": "none"
            },
            "guide": {
              "line-style": "solid"
            }
          },
          "zoom": {
            "shared": true
          },
          "scale-y": {
            "zooming": true,
            "line-color": "#555",
            "line-width": 1,
            "tick": {
              "line-color": "none"
            },
            "guide": {
              "line-style": "solid"
            }
          },
          "series": [{
              "values": [1.7, 2.2, 2.4, 2.6, 2.5, 2.3, 1.7, 1.2, 0.7, 0.4, 0.3, 0.3, 0.2, 0.25, 0.1, 0.2, 0.1, 0.3, 0.25, 0.15, 0.2, 0.3, 0.25, 0.15, 0.2, 0.2, 0.25, 0.3, 0.15, 0.2, 0.3, 0.5, 0.8, 1.3, 1.45, 2.2, 2.8, 2.9, 3.2, 2.4, 1.3, 0.7, 0.3, 0.15, 0.1, 0.25, 0.3, 0.25, 0.35, 0.5, 0.6, 0.7, 0.65, 0.6, 0.5, 0.45, 0.4, 0.35, 0.37, 0.3],
              "background-color": "#5698c6",
              "line-color": "#5698c6"
            },
            {
              "values": [0.2, 0.2, 0.4, 1.4, 3.4, 4.2, 5.1, 4.4, 3.7, 1.2, 0.3, 0.2, 0.2, 0.2, 0.2, 0.2, 0.1, 0.4, 0.3, 0.25, 0.3, 0.35, 0.2, 0.15, 0.1, 0.07, 0.2, 0.32, 0.27, 0.12, 0.28, 0.32, 0.38, 0.4, 0.44, 0.3, 0.2, 0.15, 0.1, 0.175, 0.2, 0.24, 0.2, 0.3, 0.35, 0.3, 0.2, 0.15, 0.5, 0.6, 0.75, 1, 1.3, 0.7, 0.85, 0.8, 0.7, 0.55, 0.45, 0.26],
              "background-color": "#FE9E49",
              "line-color": "#FE9E49"
            },
            {
              "values": [3, 2.5, 1.7, 1.1, 0.8, 0.9, 0.9, 0.7, 0.8, 0.85, 1, 0.7, 0.5, 0.4, 0.3, 0.25, 0.15, 0.2, 0.2, 0.1, 0.25, 0.15, 0.2, 0.35, 0.1, 0.07, 0.2, 0.3, 0.25, 0.2, 0.2, 0.22, 0.25, 0.4, 0.45, 0.5, 0.7, 0.65, 0.51, 0.375, 0.2, 0.24, 0.2, 0.3, 0.35, 0.3, 0.2, 0.15, 0.5, 1.2, 1.7, 2, 2.3, 2.1, 1.7, 1.3, 1, 0.7, 0.35, 0.2],
              "background-color": "#C1D4ED",
              "line-color": "#C1D4ED"
            }
          ]
        },
        {
          "type": "line",
          "height": "25%",
          "y": "75%",
          "width": "100%",
          "x": 0,
          "background-color": "#fff",
          "legend": {
            "shared": true,
            "visible": false,
            "toggle-action": "remove"
          },
          "plotarea": {
            "margin": "20px 60px 30px 60px"
          },
          "plot": {
            "line-width": 2,
            "marker": {
              "size": 0,
              "border-width": 0
            },
            "hover-marker": {
              "size": 5,
              "background-color": "black"
            }
          },
          "scale-x": {
            "line-color": "#555",
            "line-width": 1,
            "values": "1:60",
            "max-labels": 6,
            "zooming": true,
            "tick": {
              "line-color": "none"
            },
            "guide": {
              "line-style": "solid"
            }
          },
          "scale-y": {
            "zooming": true,
            "line-color": "#555",
            "line-width": 1,
            "tick": {
              "line-color": "none"
            },
            "guide": {
              "line-style": "solid"
            }
          },
          "zoom": {
            "shared": true
          },
          "series": [{
              "values": [1.7, 2.2, 2.4, 2.6, 2.5, 2.3, 1.7, 1.2, 0.7, 0.4, 0.3, 0.3, 0.2, 0.25, 0.1, 0.2, 0.1, 0.3, 0.25, 0.15, 0.2, 0.3, 0.25, 0.15, 0.2, 0.2, 0.25, 0.3, 0.15, 0.2, 0.3, 0.5, 0.8, 1.3, 1.45, 2.2, 2.8, 2.9, 3.2, 2.4, 1.3, 0.7, 0.3, 0.15, 0.1, 0.25, 0.3, 0.25, 0.35, 0.5, 0.6, 0.7, 0.65, 0.6, 0.5, 0.45, 0.4, 0.35, 0.37, 0.3],
              "line-color": "#5698c6",
              "marker": {
                "background-color": "#5698c6",
              }
            },
            {
              "values": [0.2, 0.2, 0.4, 1.4, 3.4, 4.2, 5.1, 4.4, 3.7, 1.2, 0.3, 0.2, 0.2, 0.2, 0.2, 0.2, 0.1, 0.4, 0.3, 0.25, 0.3, 0.35, 0.2, 0.15, 0.1, 0.07, 0.2, 0.32, 0.27, 0.12, 0.28, 0.32, 0.38, 0.4, 0.44, 0.3, 0.2, 0.15, 0.1, 0.175, 0.2, 0.24, 0.2, 0.3, 0.35, 0.3, 0.2, 0.15, 0.5, 0.6, 0.75, 1, 1.3, 0.7, 0.85, 0.8, 0.7, 0.55, 0.45, 0.26],
              "line-color": "#FE9E49",
              "marker": {
                "background-color": "#FE9E49",
              }
            },
            {
              "values": [3, 2.5, 1.7, 1.1, 0.8, 0.9, 0.9, 0.7, 0.8, 0.85, 1, 0.7, 0.5, 0.4, 0.3, 0.25, 0.15, 0.2, 0.2, 0.1, 0.25, 0.15, 0.2, 0.35, 0.1, 0.07, 0.2, 0.3, 0.25, 0.2, 0.2, 0.22, 0.25, 0.4, 0.45, 0.5, 0.7, 0.65, 0.51, 0.375, 0.2, 0.24, 0.2, 0.3, 0.35, 0.3, 0.2, 0.15, 0.5, 1.2, 1.7, 2, 2.3, 2.1, 1.7, 1.3, 1, 0.7, 0.35, 0.2],
              "line-color": "#C1D4ED",
              "marker": {
                "background-color": "#C1D4ED",
              }
            }
          ]
        }
      ]
    };
    
    function toggleCharts(e) {
      // just referencing original config. You can get chart info as well
    
      if (e.shapeid === 'stack') {
        myConfig.graphset[0].plot.stacked = true;
        myConfig.graphset[1].plot.stacked = true;
        myConfig.graphset[0].shapes[0]['background-color'] = 'black';
        myConfig.graphset[0].shapes[1]['background-color'] = 'white';
      } else if (e.shapeid === 'group') {
        myConfig.graphset[0].plot.stacked = false;
        myConfig.graphset[1].plot.stacked = false;
        myConfig.graphset[0].shapes[0]['background-color'] = 'white';
        myConfig.graphset[0].shapes[1]['background-color'] = 'black';
      }
    
      zingchart.exec('myChart', 'setdata', {
        data: myConfig
      });
    }
    
    zingchart.bind('myChart', 'shape_click', toggleCharts);
    
    zingchart.render({
      id: 'myChart',
      data: myConfig,
      height: "100%",
      width: "100%"
    });