• Edit
  • Download
  • <!DOCTYPE html>
    <html>
    
    <head>
      <meta charset="utf-8">
      <title>ZingSoft Demo</title>
    
      <script src="https://cdn.zingchart.com/zingchart.min.js"></script>
      <style>
        html,
        body {
          height: 100%;
          width: 100%;
          margin: 0;
          padding: 0;
        }
    
        #myChart {
          height: 100%;
          width: 100%;
          min-height: 150px;
        }
    
        .zc-ref {
          display: none;
        }
      </style>
    </head>
    
    <body>
      <div id="myChart"><a class="zc-ref" href="https://www.zingchart.com">Powered by ZingChart</a></div>
      <script>
        ZC.LICENSE = ["569d52cefae586f634c54f86dc99e6a9", "b55b025e438fa8a98e32482b5f768ff5"];
        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',
            noData: {
              visible: true,
              alpha: 0.2,
              backgroundColor: "#20b2db",
              fontSize: "16",
              textAlpha: 0.9,
              textDecoration: "none",
              wrapText: true
            },
            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: 'red',
              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: 'bar',
          noData: {
    
          },
          series: [{
            'values': []
          }]
        };
    
        zingchart.render({
          id: 'myChart',
          data: myConfig,
          height: '100%',
          width: '100%',
          defaults: myTheme
        });
      </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"><a class="zc-ref" href="https://www.zingchart.com">Powered by ZingChart</a></div>
    </body>
    
    </html>
    html,
    body {
      height: 100%;
      width: 100%;
      margin: 0;
      padding: 0;
    }
    
    #myChart {
      height: 100%;
      width: 100%;
      min-height: 150px;
    }
    
    .zc-ref {
      display: none;
    }
    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',
        noData: {
          visible: true,
          alpha: 0.2,
          backgroundColor: "#20b2db",
          fontSize: "16",
          textAlpha: 0.9,
          textDecoration: "none",
          wrapText: true
        },
        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: 'red',
          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: 'bar',
      noData: {
    
      },
      series: [{
        'values': []
      }]
    };
    
    zingchart.render({
      id: 'myChart',
      data: myConfig,
      height: '100%',
      width: '100%',
      defaults: myTheme
    });