• Edit
  • Download
  • <!DOCTYPE html>
    <html>
    
    <head>
      <meta charset="utf-8">
      <title>ZingSoft Demo</title>
    
    
      <script nonce="EIzA5RbBY1odyRlo4naTIw==" src="https://cdn.zingchart.com/zingchart.min.js"></script>
      <style>
        html,
        body,
        #myChart {
          height: 100%;
          width: 100%;
          margin: 0;
          padding: 0;
        }
      </style>
    </head>
    
    <body>
      <div id='myChart'></div>
      <script nonce="EIzA5RbBY1odyRlo4naTIw==">
        ZC.LICENSE = ["569d52cefae586f634c54f86dc99e6a9", "b55b025e438fa8a98e32482b5f768ff5"];
        zingchart.THEME = "classic";
        var myConfig = {
          "type": "bar",
          "stacked": true,
          "stack-type": "normal",
          "background-color": "#FFFFFF",
          "title": {
            "text": "Mobile OS Sales  - ",
            "font-family": "arial",
            "x": "40px",
            "y": "5px",
            "align": "left",
            "bold": false,
            "font-size": "16px",
            "font-color": "#000000",
            "background-color": "none"
          },
          "subtitle": {
            "text": "<i>Since January 14, 2013</i>",
            "font-family": "arial",
            "x": "175px",
            "y": "5px",
            "align": "left",
            "bold": false,
            "font-size": "16px",
            "font-color": "#7E7E7E",
            "background-color": "none"
          },
          "plot": {
            "bar-width": "25px",
            "hover-state": {
              "visible": false
            },
            "animation": {
              "delay": 300,
              "sequence": 1
            }
          },
          "labels": [{
              "text": "11,245 Android",
              "background-color": "#90A23B",
              "font-size": "14px",
              "font-family": "arial",
              "font-weight": "normal",
              "font-color": "#FFFFFF",
              "padding": "10%",
              "border-radius": "3px",
              "offset-y": -30,
              "shadow": false,
              "callout": true,
              "callout-height": "10px",
              "callout-width": "15px",
              "hook": "node:plot=2;index=4"
            },
            {
              "text": "9,750 iOS",
              "background-color": "#787878",
              "font-size": "14px",
              "font-family": "arial",
              "font-weight": "normal",
              "font-color": "#FFFFFF",
              "padding": "10%",
              "border-radius": "3px",
              "shadow": false,
              "callout": true,
              "callout-height": "10px",
              "callout-width": "15px",
              "hook": "node:plot=2;index=5",
              "offset-y": -30
            },
            {
              "text": "15,279 Windows",
              "thousands-separator": ",",
              "background-color": "#FFC700",
              "font-size": "14px",
              "font-family": "arial",
              "font-weight": "normal",
              "font-color": "#FFFFFF",
              "padding": "10%",
              "border-radius": "3px",
              "shadow": false,
              "callout": true,
              "callout-height": "10px",
              "callout-width": "15px",
              "offset-y": -30,
              "hook": "node:plot=2;index=9"
            }
          ],
          "scale-x": {
            "values": [
              "JAN",
              "FEB",
              "MAR",
              "APR",
              "MAY",
              "JUN",
              "JUL",
              "AUG",
              "SEP",
              "OCT",
              "NOV",
              "DEC"
            ],
            "line-color": "#7E7E7E",
            "tick": {
              "visible": false
            },
            "guide": {
              "visible": false
            },
            "item": {
              "font-family": "arial",
              "font-color": "#8B8B8B"
            }
          },
          "scale-y": {
            "values": "0:70000:10000",
            "short": true,
            "line-color": "#7E7E7E",
            "tick": {
              "visible": false
            },
            "guide": {
              "line-style": "solid"
            },
            "item": {
              "font-family": "arial",
              "font-color": "#8B8B8B"
            }
          },
          "series": [{
              "values": [
                15000,
                12000,
                42000,
                13000,
                19500,
                9750,
                11500,
                36500,
                11750,
                16000,
                9800,
                43279
              ],
              "background-color": "#787878"
            },
            {
              "values": [
                13000,
                8000,
                5000,
                20000,
                17000,
                10000,
                34000,
                6000,
                5500,
                15279,
                1500,
                2250
              ],
              "background-color": "#FFC700"
            },
            {
              "values": [
                17000,
                9000,
                2000,
                12500,
                11245,
                1750,
                5500,
                3000,
                10000,
                9750,
                1500,
                17750
              ],
              "background-color": "#90A23B"
            }
          ],
          "tooltip": {
            "visible": false
          }
        };
    
        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%;
      margin: 0;
      padding: 0;
    }
    zingchart.THEME = "classic";
    var myConfig = {
      "type": "bar",
      "stacked": true,
      "stack-type": "normal",
      "background-color": "#FFFFFF",
      "title": {
        "text": "Mobile OS Sales  - ",
        "font-family": "arial",
        "x": "40px",
        "y": "5px",
        "align": "left",
        "bold": false,
        "font-size": "16px",
        "font-color": "#000000",
        "background-color": "none"
      },
      "subtitle": {
        "text": "<i>Since January 14, 2013</i>",
        "font-family": "arial",
        "x": "175px",
        "y": "5px",
        "align": "left",
        "bold": false,
        "font-size": "16px",
        "font-color": "#7E7E7E",
        "background-color": "none"
      },
      "plot": {
        "bar-width": "25px",
        "hover-state": {
          "visible": false
        },
        "animation": {
          "delay": 300,
          "sequence": 1
        }
      },
      "labels": [{
          "text": "11,245 Android",
          "background-color": "#90A23B",
          "font-size": "14px",
          "font-family": "arial",
          "font-weight": "normal",
          "font-color": "#FFFFFF",
          "padding": "10%",
          "border-radius": "3px",
          "offset-y": -30,
          "shadow": false,
          "callout": true,
          "callout-height": "10px",
          "callout-width": "15px",
          "hook": "node:plot=2;index=4"
        },
        {
          "text": "9,750 iOS",
          "background-color": "#787878",
          "font-size": "14px",
          "font-family": "arial",
          "font-weight": "normal",
          "font-color": "#FFFFFF",
          "padding": "10%",
          "border-radius": "3px",
          "shadow": false,
          "callout": true,
          "callout-height": "10px",
          "callout-width": "15px",
          "hook": "node:plot=2;index=5",
          "offset-y": -30
        },
        {
          "text": "15,279 Windows",
          "thousands-separator": ",",
          "background-color": "#FFC700",
          "font-size": "14px",
          "font-family": "arial",
          "font-weight": "normal",
          "font-color": "#FFFFFF",
          "padding": "10%",
          "border-radius": "3px",
          "shadow": false,
          "callout": true,
          "callout-height": "10px",
          "callout-width": "15px",
          "offset-y": -30,
          "hook": "node:plot=2;index=9"
        }
      ],
      "scale-x": {
        "values": [
          "JAN",
          "FEB",
          "MAR",
          "APR",
          "MAY",
          "JUN",
          "JUL",
          "AUG",
          "SEP",
          "OCT",
          "NOV",
          "DEC"
        ],
        "line-color": "#7E7E7E",
        "tick": {
          "visible": false
        },
        "guide": {
          "visible": false
        },
        "item": {
          "font-family": "arial",
          "font-color": "#8B8B8B"
        }
      },
      "scale-y": {
        "values": "0:70000:10000",
        "short": true,
        "line-color": "#7E7E7E",
        "tick": {
          "visible": false
        },
        "guide": {
          "line-style": "solid"
        },
        "item": {
          "font-family": "arial",
          "font-color": "#8B8B8B"
        }
      },
      "series": [{
          "values": [
            15000,
            12000,
            42000,
            13000,
            19500,
            9750,
            11500,
            36500,
            11750,
            16000,
            9800,
            43279
          ],
          "background-color": "#787878"
        },
        {
          "values": [
            13000,
            8000,
            5000,
            20000,
            17000,
            10000,
            34000,
            6000,
            5500,
            15279,
            1500,
            2250
          ],
          "background-color": "#FFC700"
        },
        {
          "values": [
            17000,
            9000,
            2000,
            12500,
            11245,
            1750,
            5500,
            3000,
            10000,
            9750,
            1500,
            17750
          ],
          "background-color": "#90A23B"
        }
      ],
      "tooltip": {
        "visible": false
      }
    };
    
    zingchart.render({
      id: 'myChart',
      data: myConfig,
      height: '100%',
      width: '100%'
    });